Good morning,
I'm trying to show Google Maps in my app on Ionic2.
The following warnings are being given to me by console:
Native: tried accessing the GoogleMap plugin but it's not installed.
Install the GoogleMap plugin: 'ionic plugin add plugin.google.maps.Map'
I have already added the plugin theoretically with this instruction.
cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YOUR_API_KEY_IS_HERE"
In fact, if I execute it again, it gives me the message:
Plugin "cordova-plugin-googlemaps" already installed on android.
I do not know what else to do. I have followed step by step tutorials of all kinds and color. And there is no way to show the map.
The code:
Component.ts
import { Component } from '@angular/core';
import {NavController, Platform} from 'ionic-angular';
import {GoogleMap, GoogleMapsEvent, GoogleMapsLatLng} from 'ionic-native';
@Component({
templateUrl: 'location-page.html'
})
export class LocationPage {
private map: GoogleMap;
constructor(private navCtrl: NavController,private platform:Platform) {
this.platform.ready().then(() => {
this.setupGoogleMap()
});
}
setupGoogleMap(){
// somewhere in your component
try{
let location = new GoogleMapsLatLng(40.409202,-3.732649);
this.map = new GoogleMap('map', {
'backgroundColor': 'white',
'controls': {
'compass': true,
'myLocarionButton': true,
'indoorPicker': true,
'zoom': true
},
'gestures': {
'scroll': true,
'tilt': true,
'rotate': true,
'zoom': true
},
'camera': {
'latLng': location,
'tilt': 30,
'zoom': 15,
'bearing': 50
}
});
this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
console.log('Map is ready!');
})
} catch(e){
e => console.log(e);
}
}
latitud: number = 40.409202;
longitud: number = -3.732649;
}
component.html
<ion-content>
<div id="map"></div>
</ion-content>
Code after trying the link: link
export class LocationPage {
private map: GoogleMap;
constructor(private navCtrl: NavController) {}
lat: number = 51.678418;
lng: number = 7.809007;
HTML:
<ion-col>
<sebm-google-map [latitude]="lat" [longitude]="lng">
<sebm-google-map-marker [latitude]="lat" [longitude]="lng"></sebm-google-map-marker>
</sebm-google-map>
</ion-col>
It still does not work even though it no longer fails.