Struggling to load markers when the button is clicked to find nearby gyms. Despite loading the map to my location upon click, no markers are displayed and an error indicating that then does not exist on type 'void' within IonViewDidLoad.
gyms.html
<ion-header>
<ion-navbar>
<ion-title>Gyms Nearby</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-buttons start>
<button ion-button round full (click)="gymMap()">Find Gyms Near Me</button>
</ion-buttons>
<div #map id="map"> </div>
<div id="resultList">
<ion-list>
<ion-card>
<ion-item ng-if = "places" >
Places Found: {{places?.length}}
</ion-item>
</ion-card>
<ion-card id="result"> </ion-card>
<button ion-item *ngFor = "let place of places; let i = index">
{{place.name}} + <br/> {{place.vicinity}} <br /> Average Rating: {{place.rating}}
</button>
</ion-list>
</div>
</ion-content>
gyms.ts
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
declare var google;
@Component({
selector: 'page-gyms',
templateUrl: 'gyms.html',
})
export class GymsPage {
map: any;
places: Array<any>;
constructor(public navCtrl: NavController, public navParams: NavParams, public geolocation:Geolocation) {
}
ionViewDidLoad() {
this.gymMap().then((results : Array <any>)=>{
for (let i=0; i< results.length; i++){
this.createMarker(results[i]);
}
this.places = results;
}, (status)=>console.log(status));
}
gymMap(){
this.geolocation.getCurrentPosition().then((position) =>{
let currentLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
let mapOptions = {
zoom: 12,
center: currentLocation,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(document.getElementById("map"),mapOptions);
let service = new google.maps.places.PlacesService(this.map);
let request = {
location : currentLocation,
radius : '10000',
rankBy : google.maps.places.DISTANCE,
type: ['gym'],
};
return new Promise((resolve,reject) =>{
service.nearbySearch(request,(results,status)=>{
if (status == google.maps.places.PlacesServiceStatus.OK){
resolve(results);
}else{
reject(results);
}
});
});
});
}//end of gymMap
createMarker(place){
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
position: place.geometry.location,
title: place.name,
});
google.maps.event.addListener(marker, 'click', ()=>{
let infowindow = new google.maps.InfoWindow({
content: place.name
});
infowindow.open(this.map,marker);
})
}//end of createMarker
}//end of GymsPage