Google Maps InfoWindow or Popover

Ionic Framework ionic-v3
1

Hi all,
I’m trying to show some info and a button with a function when clicking on a Google Maps Javascript marker.

I have two solutions: add native Google Maps InfoWindow or present a Popover.

But with InfoWindow I’m not able to obtaing Ionic style inside it (for text and butoon),
instead with Popover I’m not able to assign it a specific position (I’d like to show it immediatly near marker like native InfoWindow, I’ve tried to create a MouseEvent but without success).

Any idea on how to make working at least one of two solutions?

Thanks

1 Like
2

Hi,

same problem here. I have tried both solutions, and each has its drawback.
This is what i have got so far:

Static Ionic style:

// init
this.info = new google.maps.InfoWindow();

// on show window
let content = `
[...]
<button ion-button="" id="map_button_${id}"
            class="item-button button button-md button-default button-default-md">
        <span class="button-inner">Open</span>
        <div class="button-effect"></div>
</button>`;
this.infoWindow.setContent(content);

Drawback: manual update of used components if e.g. classes, html structure etc. of ionic changes.

Popover:

// init
[...]
this.map = new google.maps.Map(htmlElement, mapOptions);
this.overlay = new google.maps.OverlayView();
this.overlay.draw = function () {};
this.overlay.setMap(this.map);

// add markers
[...]
google.maps.event.addListener(marker, "click", (event) => {
    if(event && event.latLng) {
        let point = this.overlay.getProjection().fromLatLngToContainerPixel(event.latLng); 
        let popover = this.popoverCtrl.create(PopoverPage);
        popover.present({ ev: { screenX: point.x, screenY: point.y } });
    }
});

Drawback: difficult to position, user has to dismiss popover to interact with map or rest the of page again.

I am currently going with the static html solution.

3

I’ll try popover with your trick, but I think me too I’ll go for static HTML.

Main drawback is also correctly handle different platform buttons:
in your example you have button-md but could be button-ios or button-wp

4

Really need a working solution for this. Ideally for me would be having ionic apply its css classes to html elements inside the google maps infowindow. I’d like to just use the ion-button attribute and have the css styles applied as ionic normally does.

Any recommended way to do this?

5

Looks like this will do the trick:

https://angular-maps.com/docs/api/latest/ts/core/index/SebmGoogleMapInfoWindow-directive.html