Odtnhj

I want to display maps in my application but Google map isn't showing up. I have made my application on Ionic and I have used the Cordova Google Maps plugin. Here is the link to my code. Please help me.

Try to add this in config.xml plugins list:

<plugin name="cordova-plugin-googlemaps" spec="~2.0.6">
 <variable name="API_KEY_FOR_ANDROID" value="Your_key" />
</plugin>

Have you registered in Google Maps and added API KEY do your app?

Here is the code that worked :

import Component from '@angular/core';


import NavController from 'ionic-angular';
import GoogleMap, GoogleMaps, LatLng, CameraPosition, GoogleMapsEvent from '@ionic-native/google-maps';

@Component(
 selector: 'page-home',
 templateUrl: 'home.html'
)
export class HomePage 

 constructor(public navCtrl: NavController, public googleMaps: GoogleMaps) 

 

 ngAfterViewInit() 
 this.loadMap();
 

 loadMap() 
 let element = document.getElementById('map');
 let map: GoogleMap = this.googleMaps.create(element, );
 let latlng = new LatLng(40.7128, -74.0059);


 map.one(GoogleMapsEvent.MAP_READY).then(() => 
 let position: CameraPosition = 
 target: latlng,
 zoom: 10,
 tilt: 30
 
 map.moveCamera(position);
 )
 

And in your HTML file

<div #map id="map" style="height:100%;"></div>

This is the tutorial : http://tphangout.com/ionic-2-google-maps/

1.open project directory and run this in cmd

 ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="api key" -variable API_KEY_FOR_IOS="api key here"

2.add this in specific map page

declare var google;

3.In the same class

 ionViewDidLoad() 
 if (this.global.checkNetwork() == true) 
 this.initializeMap();
 
 else 
 this.showAlert("Internet is not available");
 
 

 initializeMap() 

 let locationOptions = timeout: 20000, enableHighAccuracy: true ;

 navigator.geolocation.getCurrentPosition(

 (position) => 

 let options = 
 center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
 zoom: 16,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 

 this.map = new google.maps.Map(document.getElementById("map_canvas"), options);
 ,

 (error) => 
 console.log(error);
 , locationOptions
 );
 

4.in home.html

 <ion-content>
 <!-- <button ion-button (click)="presentModal()">presentModal</button> -->
 <div id="map_canvas"></div>
</ion-content>

5.in home.scss

page-home 
 #map_canvas 
 width: 100%;
 height: 100%;
 

6. include in your src/index.html file (above the cordova.js file):

that is it