title: Google Maps Native cordova plugin with Ionic 3 only showing a grey box
body: <p>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. </p>
  
  <p>I've tried using the tutorials <a href="https://ionicframework.com/docs/native/google-maps/" rel="nofollow noreferrer">https://ionicframework.com/docs/native/google-maps/</a> below is the code </p>
  
  <pre><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: '&lt;div #map id="map"&gt;&lt;/div&gt;'
  })
  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(() =&gt; {
        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 =&gt; {
            marker.on(GoogleMapsEvent.MARKER_CLICK)
              .subscribe(() =&gt; {
                alert('clicked');
              });
          });
  
      });
  }}
  </code></pre>
  
  <p>and the CSS I've added is </p>
  
  <pre><code>#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;
  }
  </code></pre>