Ionic 2 Google Maps javascript API for nearby search


#1

Hi,

I am new to ionic. I am using Ionic 2. The problem is I am using Google places api for javascript in ionic 2 and in that everything works. Now what I want to do is to search for nearby train stations and add markers to those places. When I try to add markers, there is an error saying that that “this.map” is undefined in the “findTransit” function. I think the problem is with the index.html where I have put this line

<script src="http://maps.google.com/maps/api/js?libraries=places"></script>

Here i think there has to be a callback value like

<script src="http://maps.google.com/maps/api/js?libraries=places&**callback=functionName**"></script>

How can I get this to work?

my home.ts is

> import { Component, ViewChild, ElementRef } from '@angular/core';
> import { NavController } from 'ionic-angular';
> import { Geolocation } from 'ionic-native';
>  
> declare var google;
>  
> @Component({
>   selector: 'page-home',
>   templateUrl: 'home.html'
> })
> export class HomePage {
>  
>   @ViewChild('map') mapElement: ElementRef;
>   map: any;
>   public currentLocation;
>  
>   constructor(public navCtrl: NavController) {
>     
>   }
>  
>   ionViewDidLoad(){
>     this.loadMap();
>     
>   }
>  
>    loadMap(){
>  
>     Geolocation.getCurrentPosition().then((position) => {
>  
>       let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
>       
>       this.currentLocation = latLng;

>       let mapOptions = {
>         center: latLng,
>         zoom: 15,
>         mapTypeId: google.maps.MapTypeId.ROADMAP
>       }
>  
>       this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

>       this.addMarker();
>  
>     }, (err) => {
>       console.log(err);
>     });
>   }

>   addMarker(){
>  
>   let marker = new google.maps.Marker({
>     map: this.map,
>     animation: google.maps.Animation.DROP,
>     position: this.currentLocation
>   });
>  
>   let content = "<h4>Information!</h4>";          
>  
>   this.addInfoWindow(marker, content);
>  
> }

> addInfoWindow(marker, content){
>  
>   let infoWindow = new google.maps.InfoWindow({
>     content: content
>   });
>  
>   google.maps.event.addListener(marker, 'click', () => {
>     infoWindow.open(this.map, marker);
>   });
>  
> }

> findTransit(){
>   var request = {
>     location: this.currentLocation,
>     radius: '5000',
>     types: ['train_station']
>   };

>   // Create the PlaceService and send the request.
>   // Handle the callback with an anonymous function.
>   var service = new google.maps.places.PlacesService(this.map);
>   service.nearbySearch(request, function(results, status) {
>     if (status == google.maps.places.PlacesServiceStatus.OK) {
>       for (var i = 0; i < results.length; i++) {
>         var place = results[i];
>         // If the request succeeds, draw the place location on
>         // the map as a marker, and register an event to handle a
>         // click on the marker.
>         console.log(place.geometry.location);
>         var marker = new google.maps.Marker({
>           map: this.map,
>           position: place.geometry.location
>         });
>       }
>     }
>   });

> }
> }

my index.html is

> import { Component, ViewChild, ElementRef } from '@angular/core';
> import { NavController } from 'ionic-angular';
> import { Geolocation } from 'ionic-native';
>  
> declare var google;
>  
> @Component({
>   selector: 'page-home',
>   templateUrl: 'home.html'
> })
> export class HomePage {
>  
>   @ViewChild('map') mapElement: ElementRef;
>   map: any;
>   public currentLocation;
>  
>   constructor(public navCtrl: NavController) {
>     
>   }
>  
>   ionViewDidLoad(){
>     this.loadMap();
>     
>   }
>  
>    loadMap(){
>  
>     Geolocation.getCurrentPosition().then((position) => {
>  
>       let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
>       
>       this.currentLocation = latLng;

>       let mapOptions = {
>         center: latLng,
>         zoom: 15,
>         mapTypeId: google.maps.MapTypeId.ROADMAP
>       }
>  
>       this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

>       this.addMarker();
>  
>     }, (err) => {
>       console.log(err);
>     });
>   }

>   addMarker(){
>  
>   let marker = new google.maps.Marker({
>     map: this.map,
>     animation: google.maps.Animation.DROP,
>     position: this.currentLocation
>   });
>  
>   let content = "<h4>Information!</h4>";          
>  
>   this.addInfoWindow(marker, content);
>  
> }

> addInfoWindow(marker, content){
>  
>   let infoWindow = new google.maps.InfoWindow({
>     content: content
>   });
>  
>   google.maps.event.addListener(marker, 'click', () => {
>     infoWindow.open(this.map, marker);
>   });
>  
> }

> findTransit(){
>   var request = {
>     location: this.currentLocation,
>     radius: '5000',
>     types: ['train_station']
>   };

>   // Create the PlaceService and send the request.
>   // Handle the callback with an anonymous function.
>   var service = new google.maps.places.PlacesService(this.map);
>   service.nearbySearch(request, function(results, status) {
>     if (status == google.maps.places.PlacesServiceStatus.OK) {
>       for (var i = 0; i < results.length; i++) {
>         var place = results[i];
>         // If the request succeeds, draw the place location on
>         // the map as a marker, and register an event to handle a
>         // click on the marker.
>         console.log(place.geometry.location);
>         var marker = new google.maps.Marker({
>           map: this.map,
>           position: place.geometry.location
>         });
>       }
>     }
>   });

> }
> }

#2

you should use the fat arrow notation here instead of the old “function” syntax.

your “this” is not the “this” you think it is ;).

service.nearbySearch(request, (results, status) => {
  // ...
});

#3

Thank you alot. I got this to work by creating a variable inside the findTransit() and assigning it to this.map. But I think your method must be the right way to do it and it works.

Could you direct me to learn more about the “this” you mentioned earlier


#4

#5

i’m looking for the same code can you please share your code on forum