1

I'm developing an Ionic/Angular app which implements GoogleMaps.

I want my app to have the Google Map always on fullscreen on the background. I wish the components to render over it but I want Google Maps to always return to me the correct target/center coordinates.

This is a little image explaining my issue: enter image description here

Already tried solutions:

  1. If I set on Ionic my map in an ion-content with fullscreen (which means it expands behind the header and the footer), I would not have access to the correct center shown. Plus, the Google logo wouldn't be visible, which violates their policy.

  2. Put the ion-header/content/footer inside the map div. That doesn't work. I can't explain why.

Is there simply a sort of viewport editing tool in Google Maps js API that I just haven't found?

Roman Panaget
  • 1,578
  • 12
  • 21

1 Answers1

1

SOLVED

Since the fullscreen feature of ion-content does not seem to be functional so far (maybe this answer has to be corrected in the future), I decided to drop the ion tags.

To make a functional background Google Map, I took its div as the root. Inside I placed 3 divs to make the header, the content and the footer like explained in this post:

How to create div to fill all space between header and footer div

Thought this was doing the trick but my Google Maps wasn't able to interact with the user anymore, because the content div was catching the touch events. So I followed this trick, and did the work for me:

HTML “overlay” which allows clicks to fall through to elements behind it

Finally, to change my map viewport size without changing the real map size, I used the padding feature included in the Maps API which only pads the camera and not the whole Maps view:

Google Maps API JS - Map

(Personally, I used the GoogleMapOptions interface of ionic-native/google-maps, but still the same feature)

Hope this helps anyone.

Roman Panaget
  • 1,578
  • 12
  • 21