I've been following this guide on using Google Place JavaScript library to show a list of restaurants within a 500 metre radius of the hard coded coordinates.
This is what I have attempted so far:
The .ts file
export class AmenityPage {
nearbyPlaces: any;
service: any;
map: any;
constructor(){
}
init_map(){
let here = new google.maps.LatLng(-1.3631861,36.6560394);
let request = {
location: here,
radius: [500],
type: ['restaurant']
}
this.service = new google.maps.places.PlacesService(this.map);
this.service.nearbySearch(request, this.callback);
}
callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
this.nearbyPlaces = [];
for (var i = 0; i < results.length; i++) {
//let place = results[i];
this.nearbyPlaces.push(results[i]);
}
}
}
}
And here is the .html file:
<ion-content>
<ion-list>
<ion-item *ngFor = "let place of nearbyPlaces">
<h3>{{place.name}}</h3>
</ion-item>
</ion-list>
...
</ion-content>
The problem is, no text is displayed when the app is built, neither no errors appear on the console log. I'm not well versed in Ionic, so I haven't got a clue as to what I left out of the code.
Is there a conventional approach to this? Any suggestions and directions on how to solve this is highly appreciated.
