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
> });
> }
> }
> });
> }
> }