Google Maps Native cordova plugin with Ionic 3 only showing a grey box

Question

I'm trying to get a map showing and alls I get is a grey box with the google logo at the bottom of it. I've looked at the other posts on this website, and tried them all and none of them seem to fix it. I'm using ionic 3.12.0 with cordova plugin googlemaps 2.0.7 I've made sure the API key is correct and enabled in the dashboard.

I've tried using the tutorials https://ionicframework.com/docs/native/google-maps/ below is the code

import {
 GoogleMaps,
 GoogleMap,
 GoogleMapsEvent,
 GoogleMapOptions,
 CameraPosition,
 MarkerOptions,
 Marker
} from '@ionic-native/google-maps';


import { Component, Input, ViewChild } from '@angular/core';
import { Platform } from 'ionic-angular';

@Component({
  selector: 'map',
  template: '<div #map id="map"></div>'
})
export class Map {

  map: GoogleMap;
  mapElement: HTMLElement;
  constructor(private googleMaps: GoogleMaps) { }

  setMapLocation(coords: any) {
    this.map.setCameraTarget(coords);
  }

  ionViewDidLoad() {
   this.loadMap();
  }

  loadMap() {
  this.mapElement = document.getElementById('map');

  let mapOptions: GoogleMapOptions = {
    camera: {
      target: {
        lat: 43.0741904,
        lng: -89.3809802
      },
      zoom: 18,
      tilt: 30
    }
  };

  this.map = this.googleMaps.create(this.mapElement, mapOptions);

  // Wait the MAP_READY before using any methods.
  this.map.one(GoogleMapsEvent.MAP_READY)
    .then(() => {
      console.log('Map is ready!');

      // Now you can use all methods safely.
      this.map.addMarker({
          title: 'Ionic',
          icon: 'blue',
          animation: 'DROP',
          position: {
            lat: 43.0741904,
            lng: -89.3809802
          }
        })
        .then(marker => {
          marker.on(GoogleMapsEvent.MARKER_CLICK)
            .subscribe(() => {
              alert('clicked');
            });
        });

    });
}}

and the CSS I've added is

#map {
    width: 100% !important;
    height: 100% !important;
    img{ max-width: none !important; }
    overflow:visible !important;
    z-index: 1;
}

ion-app._gmaps_cdv_ .nav-decor{
  background-color: transparent !important;
}

Answer 1

I had the same problem,

This worked for me.

Remove the google maps plugin Remove the platforms

Re add the plugin with a different API Key Re add the platforms

Answer 2

There could be various reasons.

Google Maps Android API (or Google Maps SDK for iOS) should be enabled in your google cloud console.

Check validity and restrictions of your Google API key.

Use ElementRef from @angular/core instead of HTMLElement.

Try this: https://codeburst.io/native-google-maps-and-geolocation-ionic-fe635a00249d

Answer 3

Go to console.cloud.google.com

You will have to setup billing (you won't be charged)

Search for: API

Enable Maps SDK for Android

Enable Maps SDK for iOS

Generate an API key

Create a new ionic project and press Y when asked if you want cordova support.

ionic start yourProjectName blank

After completion do

cd yourProjectName

Add the platforms to your project.

ionic cordova platform add ios

ionic cordova platform add android

Then run

ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YourGeneratedApiKeyFromGoogleCloudPlatform" 
  --variable API_KEY_FOR_IOS="YourGeneratedApiKeyFromGoogleCloudPlatform"

Then run

npm install --save @ionic-native/core@latest @ionic-native/google-maps@latest

So now you have everything installed and you need to import modules into your ts files.

in your app.module.ts import { GoogleMaps } from '@ionic-native/google-maps' and add GoogleMaps to the providers array

providers: [
    StatusBar,
    SplashScreen,
    GoogleMaps,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]

Now you need to setup your TS,HTML and SCSS

Im going to paste my working code that was preceded by all the steps above.

home.ts

import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  GoogleMapOptions,
  CameraPosition,
  MarkerOptions,
  Marker
} from '@ionic-native/google-maps';
import { Component } from "@angular/core/";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  map: GoogleMap;
  constructor() { }

  ionViewDidLoad() {
    this.loadMap();
  }

  loadMap() {

    let mapOptions: GoogleMapOptions = {
      camera: {
         target: {
           lat: 43.0741904,
           lng: -89.3809802
         },
         zoom: 18,
         tilt: 30
       }
    };

    this.map = GoogleMaps.create('map_canvas', mapOptions);

    let marker: Marker = this.map.addMarkerSync({
      title: 'Ionic',
      icon: 'blue',
      animation: 'DROP',
      position: {
        lat: 43.0741904,
        lng: -89.3809802
      }
    });
  }
}

home.html

<ion-content padding>
  <h3>Ionic GoogleMaps Starter</h3>

  <div id="map_canvas">
    <button ion-button >Start demo</button>
  </div>
</ion-content>

home.scss

page-home {
    #map_canvas {
      height: 90%;
    }
  }

If the map is still gray it means your API key is not being used in the right place.

Check these files

config.xml

package.json

and platforms/android/app/src/main/AndroidManifest.xml

These 3 files have your API key

Check the key in them and compare it with yours

Do not edit AndroidManifest.xml it gets rewritten when you build.

Best of luck