Ionic v1 – Google maps are not initially loading in iOS

I have a really strange issue, which started to happen about a week ago.

I have an ionic v1 app, that uses Google maps (not a cordova plugin, but the web version of google maps), and these maps get opened in a modal and have always worked (at least for two years).

The JS code I currently have is as follows

$scope.pickup_map = {     center: item.location,     zoom: 14,     control: pickupMapControl,     mapOptions: {         draggable: true,         disableDefaultUI: true,         zoomControl: true,         zoomControlOptions: {             style: google.maps.ZoomControlStyle.LARGE,             position: google.maps.ControlPosition.RIGHT_CENTER         }     } } 

And then in the openModal method:

$timeout(     () => {         const map = pickupMapControl.getGMap()         map.setCenter(new google.maps.LatLng(item.location.latitude, item.location.longitude))         google.maps.event.trigger(map, 'resize')     },     100 ) 

In the html I have:

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&amp;libraries=places&amp;key=AIzaSyAUKvpku-JhbniZY80NLq_A2Ejgk_b_lUc&amp;v=3.31" async></script> 

and

<ion-modal-view>   <ion-header-bar class="bar-calm">     <h1 class="title">Pick-up Location</h1>     <div class="button button-clear" ng-click="closeMapViewer()"><span class="icon ion-close"></span></div>   </ion-header-bar>    <ion-content class="pickup-location-viewer">     <ui-gmap-google-map        center="pickup_map.center"        zoom="pickup_map.zoom"        control="pickup_map.control"        options="pickup_map.mapOptions"        draggable="true"        data-tap-disabled="true"       ng-if="pickup_map.control"     >       <ui-gmap-circle center="marker.position" stroke="marker.stroke" fill="marker.fill" radius="marker.radius"></ui-gmap-circle>       <ui-gmap-marker coords="userPosition" icon="{ url: 'img/user-pos-icon.png' }" idKey="user"></ui-gmap-marker>     </ui-gmap-google-map>   </ion-content> </ion-modal-view> 

This works perfectly ok in both Chrome and Safari (in the desktop browser), as well as on Android devices.

My iOS screenshot looks like this:

I specifically added the screenshot because I know that many people have the experience where the Google logo etc appears at the bottom, but it does not happen in this case.

The really weird thing is that the map will display if I zoom or move it ever so slightly, however, setting the zoom or re-centering the map programmatically afterward does nothing.

I have checked the network calls and can see that in iOS, no API calls are sent to Google initially until I move the map around, whereas, on the web and Android, they are definitely sent on opening the modal. So it seems the issue is that for whatever reason, it's not being initialized properly in iOS, although as mentioned nothing in the codebase has been changed recently.

I realize that currently the latest stable version of google maps is v3.34, and I am still using v3.31, but I test with every incremental version up to v3.35 and none of that made a difference at all.

Additionally - but not as important the zoom controls are missing in iOS only, perhaps it's a related issue, although they don't even show up once the map actually does start showing.

Any suggestions for this problem would be appreciated!

2 Answers

Answers 1

Grey map oftentimes means your API key doesn't allow to use iOS Map. So, do make sure you enabled enable the google maps android api v2 and the google maps sdk for ios BEFORE generating API key.

You need to generate API key for application (not for browser or server).

Then, it is possible to use the same API for both iOS and Android.

Because you mention this doesn't work, make sure the script tag is between head and body.

If this is also done right, go through the following troubleshooting steps: https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v1.4.0/TroubleShooting/Blank-Map/README.md

If you still get the error, do let me know and I'll look at it again.

Answers 2

I suppose, there are 3 solutions to fix it:

1. Delete the Ionic and reinstall it.

Check if your code has the following strings:

platform.ready().then(() => {     this.loadMap(); }); 

Look at this useful GitHub discussion: Ionic Google Maps page is blank #1573.

2. Also this issue occurs when the Google Maps SDK is not enabled for your API Key. To enable it, open your developer console at https://console.developers.google.com . You need a Valid API Key.

On the left panel select Library. Select Google Map SDK for iOS under Google APIs heading and choose Enable API.

3. Do not resize your map inside an init function, it doesn’t make sense. You should initialise the Map once on the first time you’re viewing it. Any alterations must be separated from the initialisation, as well as the resize event. The resize event should occur after your map has initialised and not in the process itself.

   var map = ...; // map initialisation  google.maps.event.addDomListener(window, "resize", function() {     var center = map.getCenter();     google.maps.event.trigger(map, "resize");     map.setCenter(center);  }); 

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati