I try to implement find nearby location.but there is a problem map is showing but nearby markar is not showing please guide me.
below my code.
constructor(public navCtrl: NavController,private ngZone: NgZone, private geolocation : Geolocation) {}
ionViewDidLoad() {
console.log('ionViewDidLoad DetailsPage');
this.loadMap();
}
@ViewChild('map') mapElement: ElementRef;
map: any;
loadMap(){
this.geolocation.getCurrentPosition().then((position) => {
let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
let mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
let service = new google.maps.places.PlacesService(mapOptions);
service.nearbySearch({
location: latLng,
radius: 500,
type: ['pub']
}, (results, status) => {
this.callback(results, status)
this.addMarker();
});
}, (err) => {
console.log(err);
});
}
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.geometry.location;
var marker = new google.maps.Marker({
map: this.map,
position: place.geometry.location
});
let infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', () => {
this.ngZone.run(() => {
infowindow.setContent(place.name);
infowindow.open(this.map,this);
});
});
}
addMarker(){
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
position: this.map.getCenter()
});
let content = "<h4>You are here!</h4>";
this.addInfoWindow(marker, content);
}
addInfoWindow(marker, content){
let infoWindow = new google.maps.InfoWindow({
content: content
});
google.maps.event.addListener(marker, 'click', () => {
this.ngZone.run(() => {
infoWindow.open(this.map, marker);
});
});
}