I`m trying to put marker on my current location, I follow the instructions here on putting marker but idk why I my marker does not show. Here is my code
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
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;
public longitude:any;
public latitude:any;
constructor(
public navCtrl: NavController,
private geolocation: Geolocation) {
}
ionViewDidLoad() {
}
getLocation(){
alert("Pressed please wait");
this.geolocation.getCurrentPosition().then((resp) => {
alert("longitude =>"+resp.coords.latitude+" latitude=>"+resp.coords.latitude);
this.longitude = resp.coords.latitude;
this.latitude = resp.coords.latitude;
let mapOptions: GoogleMapOptions = {
camera: {
target: {
lat: resp.coords.latitude,
lng: resp.coords.longitude
},
zoom: 18,
tilt: 30
}
};
this.map = GoogleMaps.create('map_canvas',mapOptions);
}).catch((error) => {
alert('Error getting location');
});
}
mapMarker(){
alert('adding marker');
this.map.addMarker({
icon: 'red',
animation: 'DROP',
position: {
lat: this.latitude,
lng: this.longitude
},
title: "My position"
}).then((marker: Marker) =>{
marker.showInfoWindow();
});
}
HTML file
<button ion-button (click)="mapMarker()">
<ion-icon name="street-view"></ion-icon>
</button>
<ion-fab top right >
<button ion-fab color="primary">Share</button>
<ion-fab-list side="left">
<button ion-fab (click)="getLocation()">
<ion-icon name="location"></ion-icon>
</button>
</ion-fab-list>
</ion-fab>
<div id="map_canvas"></div>
I dont have problem in showing the google map, only problem is marker. Any idea why? Thanks
Edit => btw I will click a button in order to show the marker