Is possible to open a page from infowindow of google maps?

Ionic Framework ionic-v3
1

Hi i create a multiple markers and i have this infowindow

insertEventsMaker(events) {
    var latletEvents = { lat: parseFloat(events.place.latitude), lng: parseFloat(events.place.longitude) };
    var contentEvents = '<h4 class="center">' + events.name + '</h4><p class="center">' + events.place.name + '</p>'
     + '<button (click)="openEvents(events)">PROVA</button>';

    events.place.markerEvents = new google.maps.Marker({
      map: this.map,
      animation: google.maps.Animation.DROP,
      position: latletEvents,
      icon: 'http://maps.google.com/mapfiles/ms/micons/yellow-dot.png'
    });

    console.log(events);
    this.addInfoWindow(events.place.markerEvents, contentEvents);
}

but the button click with call function openEvents doesn’t work.

Any solution?

2

i had this problem too last time and i already solve this with googling and testing whole day on this issue…surprisingly seems like very less people have this requirement in their ionic app with google map integration…this is how i solve my problem. what i done is a map with marker and infowindow and when i press on the infowindow i would like to push to a detail page with id as navParam
1.) Import NgZone from ‘@angular/core’

2.) Add this line inside your constructor (window as any).angularComponent = { GoDetail: this.GoDetail, zone: zone }; (GoDetail is the name of function you would like to call when you press infoWindow)

3.) Create the GoDetail function with this code
GoDetail = (id: any) => { this.zone.run(() => { //Navigate To New Page this.nav.push(GolfClubDetails, { 'SelectedGolfClubID': id }); }); } (you must wrap your code inside this.zone.run() else your code wouldn;t able to run, GoDetail is your function name and (id:any) is the parameter you want to pass from the infoWindow)

4.) When Creating content of your InfoWindow use onclick=\"window.angularComponent.GoDetail('" + golf.ID + "');\" (as you can see you need to use onclick instead of (click))

AND BOOM everything work fine now…

3 Likes
3

Thank you so much! Now works!

Your solution is perfect for my issue :slight_smile: and i think that solution will save many ionic developers :smiley:

4

glad I’m able to help and thanks for the accepted solution :grin:

1 Like
5

Hi :smiley: i have an other problem :slight_smile:

if i would to pass an entire item how to do?

  insertEventsMaker(events) {
    var latletEvents = { lat: parseFloat(events.place.latitude), lng: parseFloat(events.place.longitude) };
    var contentEvents = '<h4 class="center">' + events.name + '</h4><p class="center">' + events.place.name + '</p>'
      + "<button onclick=\"window.angularComponent.myFunction('" + events + "')\">CLICK</button>";



    events.place.markerEvents = new google.maps.Marker({
      map: this.map,
      animation: google.maps.Animation.DROP,
      position: latletEvents,
      icon: 'http://maps.google.com/mapfiles/ms/micons/yellow-dot.png'
    });

    this.addInfoWindow(events.place.markerEvents, contentEvents);
  }

  myFunction = (events) => {
    this._ngZone.run(() => {
    console.log(events);
      //Navigate To New Page
      //this.navCtrl.push(DetailsPage, {id});
    });
  }

console.log(events) return an object without element

but if i pass in button onclick="window.angularComponent.myFunction(‘" + events.name + "’)"

the console.log(events) return the correct string.

6

i don‘t think you can pass object in plain javascript onclick function…a nice hack would be add an id for your events item and pass event.id. after that you can use the id to get your object if your object is store in a list

7

Thank You i pass only id :slight_smile:

8

thank you so much! chanyap92

9

is it working with ionic 3?