Hi, I’m using javascript google maps api.
When I go in my page for the first time, the panBy method works fine but if I go back and return in the page, panBy method doesn’t seem to have any effect on the maps.
Therefore, my marker will be hidden under my custom div.
Any help would be appreciated.
Thanks.
getLocation(){
let options = {timeout: 10000, enableHighAccuracy: true};
this.geolocation.getCurrentPosition(options).then((pos) => {
console.log("receiverLat="+pos.coords.latitude, "receiverLng="+pos.coords.longitude);
this.latFrom = pos.coords.latitude;
this.lngFrom = pos.coords.longitude;
this.initMap();
}).catch((error) => {
console.log('Error getting location', error);
const alert = this.alertCtrl.create({
title: 'Warning!',
message: 'Could not get location. Please allow access to location and check your network or GPS setting.',
buttons: [
{
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
},
{
text: 'Try Again',
handler: () => {
this.getLocation();
}
}
]
});
alert.present();
});
}
initMap() {
// initialize map
let latLng = new google.maps.LatLng(this.latFrom , this.lngFrom);
let mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
// gestureHandling: 'cooperative',
//Sets the gestureHandling property to cooperative to prevent one-finger movements
zoomControl: false,
//Sets the zoomControl property to false to remove the Zoom control buttons on the map.
fullscreenControl: false
};
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
// Add marker
let markerIcon = {
url: "https://res.cloudinary.com/myjiran/image/upload/v1538464327/mobile_asset/My-location.svg",
scaledSize: new google.maps.Size(60, 60),
origin: new google.maps.Point(0, 0), // used if icon is a part of sprite, indicates image position in sprite
anchor: new google.maps.Point(20,40) // lets offset the marker image
}
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
icon: markerIcon,
position: latLng
});
let infoWindow = new google.maps.InfoWindow({
content: "You are here!"
});
google.maps.event.addListener(marker, 'click',() => {
infoWindow.open(this.map, marker);
});
//start panning
this.map.panBy(0, 150);
}