Latitude and Longitude is showing in alert but map is not loading. Same code is working fine for other page.
Here is My TS
import { Component, NgZone, ElementRef, ViewChild } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { Geolocation ,GeolocationOptions ,Geoposition ,PositionError } from '@ionic-native/geolocation';
import { google } from "google-maps";
/**
* Generated class for the NearBankPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
declare var google : google;
@Component({
selector: 'page-near-bank',
templateUrl: 'near-bank.html',
})
export class NearBankPage {
@ViewChild('map')
mapElement: ElementRef;
markers:any;
mapOptions:any;
map:any;
latLng:any;
constructor(public navCtrl: NavController, private ngZone: NgZone, private geolocation : Geolocation ) {
}
ionViewDidLoad() {
this.loadMap();
}
loadMap(){
this.geolocation.getCurrentPosition().then((position) => {
this.latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
alert(this.latLng)
this.mapOptions = {
center: this.latLng,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(this.mapElement.nativeElement, this.mapOptions);
this.nearbyPlace();
this.addMarkercurrentuserlocation();
}, (err) => {
alert('err '+err);
});
}
/*-----------------Find Nearby Place------------------------*/
nearbyPlace(){
this.markers = [];
let service = new google.maps.places.PlacesService(this.map);
service.nearbySearch({
location: this.latLng,
radius: 500,
types: ['atm']
}, (results, status) => {
this.callback(results, status);
});
}
callback(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
this.createMarker(results[i]);
}
}
}
createMarker(place){
var placeLoc = place;
console.log('placeLoc',placeLoc)
this.markers = new google.maps.Marker({
map: this.map,
position: place.geometry.location,
icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
});
let infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(this.markers, 'click', () => {
this.ngZone.run(() => {
infowindow.setContent(place.name);
infowindow.open(this.map, this.markers);
});
});
}
addMarkercurrentuserlocation(){
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
position: this.map.getCenter()
});
let content = "<h4>Me</h4>";
this.addInfoWindow(marker, content);
}
addInfoWindow(marker, content){
let infoWindow = new google.maps.InfoWindow({
content: content
});
google.maps.event.addListener(marker, 'click', () => {
infoWindow.open(this.map, marker);
});
}
}
HTML
<ion-navbar>
<ion-title>nearBank</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div #map id="map"></div>
</ion-content>