How to add link to function in Google Maps InfoWindow?

Ionic Framework ionic-v3
1

I’m trying to add a clickable button to a Google Maps InfoWindow. The idea being that after you click on a map marker you see the info window with more details.

There would be a button inside that lets you link to a different screen in the application.

let content = '<button (click)="washerDetail()">Test</button>';

let infoWindow = new google.maps.InfoWindow({
    content: content
 });

The code above creates the button in the info window but not in the Ionic style. Nothing happens when I click the button though?

Any ideas?

1 Like
2

Did you found an answer? I’m also trying to edit the infowindow =P

3

Did you found an answer?

4

Heya,

I had to use NgZone to do it.

import { NgZone } from '@angular/core';

then add this to your constructor:

constructor(private _ngZone: NgZone)

then wrap the function/change etc you are trying to run as follows:

this._ngZone.runOutsideAngular(() => {
            this._ngZone.run(() => {
                this.footerVisibility = !this.footerVisibility;
                console.log('Outside Done!')
            });
        });
1 Like
5

Just realized I misread your question. I never did find the answer but what I posted may be a step in the right direction because thats how I got things to trigger on my view.

6

thanks, check if I can move forward.
for now I’m doing with actionsheets.

7

Thanks mate ! The only working answer on the internet and it also works on Angular 6.
This should be better referenced

Peace