Good,
I am trying to display a map from Google Maps in my app on Ionic2.
It is giving me the following warnings 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 theoretically added the plugin with this instruction.
cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YOUR_API_KEY_IS_HERE"
In fact if I run 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 colors. And there is no way to get the map to appear.
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: https://angular-maps.com/docs/getting-started.html
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 doesn't work even though it no longer gives an error.
Remember that this plugin is native , that is, it can only be seen on a mobile device, try it with your cell phone by connecting it to your computer and run it with
either
you should see the map correctly.
If you need the guide to test it step by step depending on your device, go to the following ionic 2 link: http://ionicframework.com/docs/v1/cli/run.html
Remember that it is only seen on your real device, not on any emulator.
Any problem related to your api key, go to the page: angular-maps.com/docs/getting-started.html where it explains how to get it and apply it to your project.