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 :
