A White Screen Result When Integerting Google Map javascript sdk


#1

i Try To integrate Google Maps Javascript Sdk into My IONIC2 APP , But I Get a white screen result
and this is the code :

the Index.html file to show the javascript sdk file with generated Keys :




Ionic App


  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">

    <script src="http://maps.google.com/maps/api/js?key=AIzaSyBC5Rap_poUNyUq1CHXgvujowrNNzkV2Ik"></script>
    
  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>

  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.log('Error', err));
    }
  </script>-->

  <link href="build/main.css" rel="stylesheet">

</head>
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The bundle js is generated during the build process -->
  <script src="build/main.js"></script>

</body>
</html>

this is the Home.ts file
import { Component,ViewChild,ElementRef } from ‘@angular/core’;

import { NavController } from 'ionic-angular';
declare var google;
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  @ViewChild('map') mapElement: ElementRef;
  map: any;
 
  constructor(public navCtrl: NavController) {
 
  }
 
  ionViewLoaded(){
    this.loadMap();
  }
 
  loadMap(){
 
    let latLng = new google.maps.LatLng(-34.9290, 138.6010);
 
    let mapOptions = {
      center: latLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
 
    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
 
  }
}

and this is the home.html file :


Home

<ion-content padding>
  <h2>Welcome to Ionic!</h2>
  <div #map id="map"></div>  
</ion-content>

the result is :


#2

The right way may be here:


#3

#4

Thank You It Worked For me