Google Maps not displaying only on iOS emulators and devices only

Hi there,

I’m using the Google Maps JavaScript API in my application to display my google maps functionality. I have the app fully working and published on Android. The map functionality works fine. However, testing on all iOS and devices and emulator I’m getting a strange gray displaying of the map.

I’ve debugged the emulator and looked at the network calls retrieving Google maps data. This works fine however I’m still seeing a weird display on iOS. I’ve edited the map elements css adding fixed width and heights but unfortunately nothing here as well.

It displays correctly on the Ionic labs iOS simulator however I assume this is because it doesn’t reflect a real iOS. Here is a screenshot of it here.

And here it is in the emulator with grey map.


Here is my Google maps provider file although this all works as it should after examining my network requests in Google dev tools.

import { Injectable } from '@angular/core';
import { ConnectivityService } from './connectivity-service';
import { Geolocation } from '@ionic-native/geolocation';
import { MarkerStyleRetro } from '../pages/marker/marker';

declare var google;

@Injectable()
export class GoogleMaps {

  mapElement: any;
  pleaseConnect: any;
  map: any;
  mapInitialised: boolean = false;
  mapLoaded: any;
  mapLoadedObserver: any;
  markers: any = [];
  styles: any = MarkerStyleRetro;
  bounds: any;

  apiKey = "myAPIkey"

  constructor(public connectivityService: ConnectivityService, private geolocation: Geolocation) {
   
    this.markers = [];
  }

  init(mapElement: any, pleaseConnect: any): Promise<any> {
   
    this.mapElement = mapElement;
    this.pleaseConnect = pleaseConnect;

    return this.loadGoogleMaps();

  }

  loadGoogleMaps(): Promise<any> {

    return new Promise((resolve) => {

      if (typeof google == "undefined" || typeof google.maps == "undefined") {

        console.log("Google maps JavaScript needs to be loaded.");
        this.disableMap();

        if (this.connectivityService.isOnline()) {

          window['mapInit'] = () => {

            this.initMap().then(() => {
              resolve(true);
            });

            this.enableMap();
          }

          let script = document.createElement("script");
          script.id = "googleMaps";

          if (this.apiKey) {
            script.src = 'http://maps.google.com/maps/api/js?key=' + this.apiKey + '&callback=mapInit';


          } else {
            script.src = 'http://maps.google.com/maps/api/js?callback=mapInit';
          }
          console.log(script.src);
          document.body.appendChild(script);

        }
      }
      else {

        if (this.connectivityService.isOnline()) {
          this.initMap();
          this.enableMap();
          resolve(true);
        }
        else {
          this.disableMap();
        }

      }

      this.addConnectivityListeners();

    });

  }

  initMap(): Promise<any> {

    this.mapInitialised = true;

    return new Promise((resolve) => {

      this.geolocation.getCurrentPosition().then((position) => {

        // UNCOMMENT FOR NORMAL USE
        //let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        this.bounds = new google.maps.LatLngBounds();
        let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
   
        let mapOptions = {
          center:  latLng,
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          styles: this.styles 
        }

        this.map = new google.maps.Map(this.mapElement, mapOptions);

        resolve(true);

      });

    });

  }

  disableMap(): void {

    if (this.pleaseConnect) {
      this.pleaseConnect.style.display = "block";
    }

  }

  enableMap(): void {

    if (this.pleaseConnect) {
      this.pleaseConnect.style.display = "none";
    }

  }

  addConnectivityListeners(): void {

    document.addEventListener('online', () => {

      console.log("online");

      setTimeout(() => {

        if (typeof google == "undefined" || typeof google.maps == "undefined") {
          this.loadGoogleMaps();
        }
        else {
          if (!this.mapInitialised) {
            this.initMap();
          }

          this.enableMap();
        }

      }, 2000);

    }, false);

    document.addEventListener('offline', () => {

      console.log("offline");

      this.disableMap();

    }, false);

  }

  addMarker(lat: number, lng: number, name: string, vicinity: any): void {


    var infoContent = '<div id="iw-container">' +
      '<div class="iw-title">' + name +
      '<div class="iw-content">' +
      '' +
      '<p>' + vicinity + '</p>' +
      '<br>' +
      '</div>' +
      '</div>';

    let latLng = new google.maps.LatLng(lat, lng);
    let infowindow = new google.maps.InfoWindow({
      content: infoContent
    });

    let marker = new google.maps.Marker({
      map: this.map,
      animation: google.maps.Animation.DROP,
      position: latLng,
      icon: {
        url: './assets/images/coffee-cup.png',
       // origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(275,20),
        scaledSize: new google.maps.Size(30, 30),
      }
    });

   this.bounds.extend(new google.maps.LatLng(lat, lng));
   this.map.fitBounds(this.bounds); //# auto - zoom
   this.map.panToBounds(this.bounds); //# auto-center

    marker.addListener('click', toggleBounce);
    marker.addListener('click', info);
    function info() {
      infowindow.open(this.map, marker);
    }

    function toggleBounce() {
      if (marker.getAnimation() !== null) {
        marker.setAnimation(null);
      } else {
        marker.setAnimation(google.maps.Animation.BOUNCE);
        setTimeout(() => { marker.setAnimation(null); }, 2000)
      }
    }

    this.markers.push(marker);
    console.log(this.markers.length);
  }

  setMapOnAll(map) {
    console.log(this.markers);
    for (var i = 0; i < this.markers.length; i++) {
      console.log(this.markers[i]);
      this.markers[i].setMap(map);
    }
  }

}

Here is the my map element styles

#map {
     width: 100%;
     min-width: 45em;
    height: 100%;
    @media only screen and (min-width: 45.063em) {
      width:100em;
    }
  }

Not much interesting there I would assume as I’ve modified it countlessly at this stage to no avail.

If anyone has any ideas I would greatly appreciate it.