title: Ionic 3 Google Map does not display on Android + IOS
body: <p>I use Ionic 3 version and I try to add a page into my app, to display a map with markers.
  I already use for my app a Google Map Id for Autocomplete (Google places...). 
  I went to Google APIs and I added Map Embed, Javascript etc... to my API Key.
  But The page appears with "Google" in the bottom and the display button", but the map is empty.
  See attached file...</p>
  
  <p>Install the Cordova and Ionic Native plugins:</p>
  
  <p>$ ionic cordova plugin add <a href="https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps" rel="nofollow noreferrer">https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps</a> --variable API_KEY_FOR_ANDROID="AIzaSyB6mEnxH4vC+++++++++9wnXXNNmK2co" --variable API_KEY_FOR_IOS="AIzaSyB6mEnxH4v++++++++++++++wnXXNNmK2co"
  $ npm install --save @ionic-native/google-maps</p>
  
  <p><strong>Home.ts:</strong> </p>
  
  <pre><code>import { NavController } from 'ionic-angular';
  import { Component, ViewChild, ElementRef } from '@angular/core';
  import { GoogleMaps, CameraPosition, GoogleMapsEvent, GoogleMap, MarkerOptions, Marker } from "@ionic-native/google-maps";
  
  @Component({
    selector: 'page-home',
    templateUrl: 'home.html'
  })
  
  export class HomePage {
  
    @ViewChild('map') mapElement: ElementRef;
    map: any;
    constructor(public navCtrl: NavController, private googleMaps: GoogleMaps) {
  
    }
    ngAfterViewInit() {
   this.loadMap();
  }
  
  loadMap() {
   // make sure to create following structure in your view.html file
   // and add a height (for example 100%) to it, else the map won't be visible
   // &lt;ion-content&gt;
   //  &lt;div #map id="map" style="height:100%;"&gt;&lt;/div&gt;
   // &lt;/ion-content&gt;
  
   // create a new map by passing HTMLElement
   let element: HTMLElement = document.getElementById('map');
  
   let map: GoogleMap = this.googleMaps.create(element);
  
   // listen to MAP_READY event
   // You must wait for this event to fire before adding something to the map or modifying it in anyway
   map.one(GoogleMapsEvent.MAP_READY).then(
     () =&gt; {
       console.log('Map is ready!');
       // Now you can add elements to the map like the marker
     }
   );
  
   // create CameraPosition
   let position: CameraPosition = {
     target: {
       lat: 43.0741904,
       lng: -89.3809802
     },
     zoom: 18,
     tilt: 30
   };
  
   // move the map's camera to position
  } 
  }
  </code></pre>
  
  <p>Home.HTML</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>Home.html :
  &lt;ion-header&gt;
    &lt;ion-navbar&gt;
      &lt;ion-title&gt;
        Map
      &lt;/ion-title&gt;
      &lt;ion-buttons end&gt;
        &lt;button ion-button (click)="addMarker()"&gt;&lt;ion-icon name="add"&gt;&lt;/ion-icon&gt;Add Marker&lt;/button&gt;
      &lt;/ion-buttons&gt;  
    &lt;/ion-navbar&gt;
  &lt;/ion-header&gt;
   
  &lt;ion-content&gt;
  &lt;div #map id="map" style="height:100%;"&gt;&lt;/div&gt; 
  &lt;/ion-content&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Home.scss</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>page-home {
  
  }</code></pre>
  </div>
  </div>
  </p>