Ionic v1 – Google maps are not initially loading in iOS

Question

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!

Answer 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.