How to use Ionic 2 Components in Google Maps Markers Info Window?

Ionic Framework ionic-v3
1

Hi everyone,

Is it possible that adding ionic2 components(buttons, ion-cards, etc) to Google maps marker info window? I know that html part is out of the context I tried zone.js for it but it still does not working. We had $compile in Angular1 but I don’t know how to do it on angular2.

Example code:
// we already defined our map in it can be shown nicely.
// this.map = defined

  var contentString = '<button primary>Ionic button</button>';

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

  let marker = new google.maps.Marker({
    position: uluru,
    map: this.map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    infowindow.open(this.map, marker);
  });
2

@candelibas Do you need desktop browser style info windows? There’s a way to create and grab the HTML DOM element using the querySelector, but why use the limited infoWindow on a mobile device? I tried the same thing, and it seemed against the grain to use the markers with dynamic HTML and DOM querying, especially on the mobile device.

I would use a modal (similar to popovers in Ionic 1 coming soon to Ionic 2) that you use to display information about the marker in question and to interact with the map canvas. And because it’s just Plain Old Angular2 Component, you can do all sorts of things…

Hope this helps

1 Like
3

Hi @wongwideweb, thanks for your comment.
I’m trying to open a modal in Ionic 2 as you wrote, by clicking on a place marker on the map, like this:

import { PlacePage } from ‘…/place/place’;

…
constructor(…, public modalCtrl: ModalController)

…

google.maps.event.addListener(marker1, 'click', function (event) {

            let pageDetails = this.modalCtrl.create(PlacePage);
            pageDetails.present();
});

BUT I have this error:

Cannot read property ‘create’ of undefined

inside “google.maps.event.addListener” it doesn’t work… why?

Thanks for you reply :wink: bye

4

“this” is dynamic in javascript, therefore “this” at the code this.modalCreate refers to the object for the listener function, you need to capture the external “this”, like so:

let that = this;
google.maps.event.addListener(marker1, ‘click’, function (event) {

        let pageDetails = that.modalCtrl.create(PlacePage);
        pageDetails.present();

});

5

Or you could just use a fat arrow function which does all that for you under the hood.

6

Or, to respond in terms of what that would actually look like:

google.maps.event.addListener(marker1, 'click',(event) =>{
        let pageDetails = this.modalCtrl.create(PlacePage);
        pageDetails.present();
});
1 Like