How to assign a PlaceResult array from the Maps JavaScript API to a typescript class member in Angular 2+? -
i trying use javascript maps api in angular 2 project in order nearby places given location. but, in order display results in template part of app, need assign resulting placeresult array typescript variable. how can achieve this? code:
import {ngzone, oninit, component, viewchild, elementref } '@angular/core'; import { formcontrol, reactiveformsmodule } "@angular/forms"; import { mapsapiloader } '@agm/core'; //import { httpjsonservice } './httpjson.service' import {} '@types/googlemaps'; import {httpclient} '@angular/common/http'; import {httperrorresponse} '@angular/common/http'; import {rootobject} './places'; @component({ selector: 'app-root', templateurl: './app.component.html', styleurls: ['./app.component.css'], providers:[httpclient] }) export class appcomponent implements oninit { public searchcontrol: formcontrol; public lat : number; public lon: number; public nearby : any; public errormessage: any; public poop: number; public query: string; public result = new array<google.maps.places.placeresult>(); @viewchild("search") public searchelementref: elementref; constructor( private mapsapiloader: mapsapiloader, private ngzone: ngzone, private places: httpclient ) { } ngoninit(): void { //create search formcontrol this.searchcontrol = new formcontrol(); //load places autocomplete this.mapsapiloader.load().then(() => { let autocomplete = new google.maps.places.autocomplete(this.searchelementref.nativeelement, { types: ["address"] }); autocomplete.addlistener("place_changed", () => { this.ngzone.run(() => { //get place result let place: google.maps.places.placeresult = autocomplete.getplace(); //verify result if (place.geometry === undefined || place.geometry === null) { return; } //set latitude, longitude , zoom this.lat = place.geometry.location.lat(); this.lon = place.geometry.location.lng(); //this.query = this.gmapsurl1+this.lat+','+this.lon+this.gmapsurl2; let loc = new google.maps.latlng(this.lat, this.lon); let service = new google.maps.places.placesservice(document.createelement('div')); function callback(results, status){ //window.alert("entered"); if (status == google.maps.places.placesservicestatus.ok){ this.result = results; //window.alert("ok"); //window.alert(results.length); (var = 0; < results.length; i++) { //window.alert('i'+ i); window.alert(results[i].name); } } } service.nearbysearch({ location: loc, radius: 500, type : 'restaurant' }, (results, status) => { callback(results, status); }); //window.alert("nearbysearch initiated"); }); }); }); } }
Comments
Post a Comment