Google Map change ion-title

Ionic Framework ionic-v3
1

I have a google map and want to change the ion-title when I click on the marker but somehow I cant get it to work . It works if I first click on the marker and change tab and go back.

html:

<ion-title>{{name}}</ion-title>

ts:

name:any;

 google.maps.event.addListener(marker, 'click', () => {
      this.name = marker.title;
    });
2

When I click the marker the console.log show the values but the ion-title doesn’t change what have I misunderstood about binding the values.

3

I don’t think your general idea is wrong and it should work, but I guess something else is happening. Please don’t abuse any, set the typing explicitly of the name i.e. name:string = ''; Could you post some more of your typescript class to actually see what’s going on? Could you please show how and when you attach the click handler?

4

I attach the listener when I adding the infowindows, the weird thing is the console log shows the updated name and if I click the marker and change the tab and go back to the map everything works. But I cant get it to work when I enter the map for the first time.

  addInfoWindow(marker, content) {
    let infoWindow = new google.maps.InfoWindow({
      content: content
    });
    google.maps.event.addListener(marker, 'click', () => {
      this.name = marker.title;
      console.log("Set the name ", this.name)
      if (this.openWindow) {
        this.closeInfoWindow.close();
      }
      this.openWindow = true;
      infoWindow.open(this.map, marker);
      this.closeInfoWindow = infoWindow;
    });
    google.maps.event.addListener(this.map, "click", function (event) {
      infoWindow.close();
    });
  }

And I initialize it in ionviewdidload

5

The console isn’t always reliable when displaying data. I don’t think it matters, but maybe you could just only attack the click listener on the marker and try it? I just tried it over here and all seems to work fine. Also set the title as I suggested, don’t use any when you know it’s going to be a string. It makes your work less error prone.

6

https://pastebin.com/iYVLT39z

Full code

7

Tried but still same problem I know its something silly but cant figure it out.

8

I have done something wrong when I initialize the map. Sometimes it works.

9

I made a new project with one marker and still it doesnt work.

import { Component,ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';
declare var google;
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild('map')mapElement:ElementRef;
  map:any;
  name:string = "";
  constructor(public navCtrl: NavController) {
  }
  ionViewDidLoad(){
    this.initializeMap();  
  }
  initializeMap(){
    let letLng = new google.maps.LatLng(62.3908, 17.3069);

    let mapOptions = {
      center : letLng,
      zoom:7,
      mapTypeId : google.maps.MapTypeId.HYBRID
    }
    this.map = new google.maps.Map(this.mapElement.nativeElement,mapOptions);
    this.addMarker();
  }
  addMarker(){
    let marker = new google.maps.Marker({
      map:this.map,
      animation: google.maps.Animation.DROP,
      position:{lat:62.3908, lng:17.3069},
      title:'Kalle'
    })
    let content = `<h1>Kalle</h1>`;
    this.addInfoWindow(marker,content);
  }

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

<ion-header>
  <ion-navbar>
    <ion-title>{{name}}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>

<div #map id="map"></div>

</ion-content>
10

Use ionic-native and this problem should go away.

1 Like
11

Got it fixed from this post.

1 Like