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

Popular posts from this blog

python - Selenium remoteWebDriver (& SauceLabs) Firefox moseMoveTo action exception -

html - How to custom Bootstrap grid height? -

transpose - Maple isnt executing function but prints function term -