ionic v1 - Google maps 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, 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!

from ionic v1 - Google maps not initially loading in iOS