hello all i’m using google map native plugin this
and this is my code to load a map
home.html file
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content >
<div id="map" #map >
</div>
</ion-content>
home.scss
ion-app .nav-decor{
background-color: transparent !important;
}
page-home {
#map {
height: 100%;
}
}
home.ts
import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, NavParams, Platform } from 'ionic-angular';
import { GoogleMaps,
GoogleMap,
GoogleMapsEvent,
GoogleMapOptions,
CameraPosition,
MarkerOptions,
Marker } from '@ionic-native/google-maps';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
map: GoogleMap;
@ViewChild('map') mapElement: ElementRef;
constructor(public navCtrl: NavController,
public navParams: NavParams,
private platform: Platform) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad HomePage');
//this.AdditionalTools.inittFirebase();
this.platform.ready().then(() => {
this.loadMap();
})
}
loadMap() {
let mapOptions: GoogleMapOptions = {
camera: {
target: {
lat: 43.0741904,
lng: -89.3809802
},
zoom: 18,
tilt: 30
}
};
this.map = GoogleMaps.create(this.mapElement.nativeElement, mapOptions);
// Wait the MAP_READY before using any methods.
this.map.one(GoogleMapsEvent.MAP_READY)
.then(() => {
console.log('Map is ready!');
// Now you can use all methods safely.
this.map.addMarker({
title: 'Ionic',
icon: 'blue',
animation: 'DROP',
position: {
lat: 43.0741904,
lng: -89.3809802
}
})
.then(marker => {
marker.on(GoogleMapsEvent.MARKER_CLICK)
.subscribe(() => {
alert('clicked');
});
});
});
}
}
my problem when i run this code in real device i’ts give me gray page with google logo only
and in the google chrome inspector it’s give me this error
Uncaught module cordova-plugin-googlemaps.CordovaGoogleMaps already defined
so what can i do to solve this error
thanks in advance
