Google Map change ion-title

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.





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

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.

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?

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', () => { = marker.title;
      console.log("Set the name ",
      if (this.openWindow) {
      this.openWindow = true;, marker);
      this.closeInfoWindow = infoWindow;
    google.maps.event.addListener(, "click", function (event) {

And I initialize it in ionviewdidload

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.

Full code

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

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

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;
  selector: 'page-home',
  templateUrl: 'home.html'
export class HomePage {
  name:string = "";
  constructor(public navCtrl: NavController) {
    let letLng = new google.maps.LatLng(62.3908, 17.3069);

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

    let infoWindow = new google.maps.InfoWindow({
    google.maps.event.addListener(marker,'click', ()=>{
      console.log(marker.title); = marker.title;,marker)


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


Use ionic-native and this problem should go away.

1 Like

Got it fixed from this post.

1 Like