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

**URL:** <https://forum.ionicframework.com/t/is-possible-to-open-a-page-from-infowindow-of-google-maps/85949>\
**Category:** ionic-v3\
**Created:** [April 9, 2017, 11:29pm UTC](https://forum.ionicframework.com/t/is-possible-to-open-a-page-from-infowindow-of-google-maps/85949 "2017-04-09T23:29:57Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![filippodicostanzo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/filippodicostanzo/32/112826_2.png) [@filippodicostanzo](https://forum.ionicframework.com/u/filippodicostanzo)\
**Post date:** [April 9, 2017, 11:29pm UTC](https://forum.ionicframework.com/t/is-possible-to-open-a-page-from-infowindow-of-google-maps/85949/1 "2017-04-09T23:29:57Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![chanyap92](https://avatars.discourse-cdn.com/v4/letter/c/a3d4f5/32.png) [@chanyap92](https://forum.ionicframework.com/u/chanyap92)\
**Post date:** [April 10, 2017, 2:35am UTC](https://forum.ionicframework.com/t/is-possible-to-open-a-page-from-infowindow-of-google-maps/85949/2 "2017-04-10T02:35:37Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![filippodicostanzo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/filippodicostanzo/32/112826_2.png) [@filippodicostanzo](https://forum.ionicframework.com/u/filippodicostanzo)\
**Post date:** [April 10, 2017, 7:32am UTC](https://forum.ionicframework.com/t/is-possible-to-open-a-page-from-infowindow-of-google-maps/85949/3 "2017-04-10T07:32:05Z")

</div>

> [@chanyap92](#):
>
> onclick="window.angularComponent.GoDetail(‘" + golf.ID + "’)

Thank you so much! Now works!

Your solution is perfect for my issue 🙂 and i think that solution will save many ionic developers 😃

---

<div class="post-metadata">

**Author:** ![chanyap92](https://avatars.discourse-cdn.com/v4/letter/c/a3d4f5/32.png) [@chanyap92](https://forum.ionicframework.com/u/chanyap92)\
**Post date:** [April 10, 2017, 7:47am UTC](https://forum.ionicframework.com/t/is-possible-to-open-a-page-from-infowindow-of-google-maps/85949/4 "2017-04-10T07:47:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![filippodicostanzo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/filippodicostanzo/32/112826_2.png) [@filippodicostanzo](https://forum.ionicframework.com/u/filippodicostanzo)\
**Post date:** [April 10, 2017, 8:40am UTC](https://forum.ionicframework.com/t/is-possible-to-open-a-page-from-infowindow-of-google-maps/85949/5 "2017-04-10T08:40:50Z")

</div>

> [@chanyap92](#):
>
> onclick="window.angularComponent.GoDetail(‘" + golf.ID + "’);"

Hi 😃 i have an other problem 🙂

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.

---

<div class="post-metadata">

**Author:** ![chanyap92](https://avatars.discourse-cdn.com/v4/letter/c/a3d4f5/32.png) [@chanyap92](https://forum.ionicframework.com/u/chanyap92)\
**Post date:** [April 10, 2017, 8:53am UTC](https://forum.ionicframework.com/t/is-possible-to-open-a-page-from-infowindow-of-google-maps/85949/6 "2017-04-10T08:53:30Z")

</div>

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](http://event.id). after that you can use the id to get your object if your object is store in a list

---

<div class="post-metadata">

**Author:** ![filippodicostanzo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/filippodicostanzo/32/112826_2.png) [@filippodicostanzo](https://forum.ionicframework.com/u/filippodicostanzo)\
**Post date:** [April 10, 2017, 1:46pm UTC](https://forum.ionicframework.com/t/is-possible-to-open-a-page-from-infowindow-of-google-maps/85949/7 "2017-04-10T13:46:48Z")

</div>

Thank You i pass only id 🙂

---

<div class="post-metadata">

**Author:** ![shimozurdo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/shimozurdo/32/114840_2.png) [@shimozurdo](https://forum.ionicframework.com/u/shimozurdo)\
**Post date:** [November 10, 2017, 1:36pm UTC](https://forum.ionicframework.com/t/is-possible-to-open-a-page-from-infowindow-of-google-maps/85949/8 "2017-11-10T13:36:23Z")

</div>

thank you so much! chanyap92

---

<div class="post-metadata">

**Author:** ![mathewk](https://avatars.discourse-cdn.com/v4/letter/m/a9a28c/32.png) [@mathewk](https://forum.ionicframework.com/u/mathewk)\
**Post date:** [February 26, 2018, 8:25am UTC](https://forum.ionicframework.com/t/is-possible-to-open-a-page-from-infowindow-of-google-maps/85949/9 "2018-02-26T08:25:47Z")

</div>

is it working with ionic 3?