Custom google maps infowindow using ionic 2

Question

I am new to ionic 2, I am trying to create a custom info window, so when a user clicks on a marker they can see some basic information like a picture and the name of the location, but they can also click on a link in the infoWindow that opens a modal with details on that location. Here is how i want to add it to my marker.

addMarker(lat: number, lng: number, place: any): void {
    let latLng = new google.maps.LatLng(lat, lng);

    let marker = new google.maps.Marker({
        map: this.map,
        animation: google.maps.Animation.DROP,
        position: latLng,
        title: place.name
    });

    let infoWindow = new google.maps.InfoWindow({
       content: `<>custom template here with some basic details</>`
    });

    marker.addListener('click', ()=> {
       infoWindow.open(this.map, marker);

    });

    this.markers.push(marker);
}

score 10 · Accepted Answer · answered Apr 03 '17 at 09:42

10

If you don't want to use any external library then you can see below example. You need to add addEventListener when infowindow is ready.Because when infowindow is ready you can find the component by document.getElementById('id').

let infoWindow = new google.maps.InfoWindow({
    content :  `<p id = "myid">Click</p>`
});
google.maps.event.addListenerOnce(infoWindow, 'domready', () => {
    document.getElementById('myid').addEventListener('click', () => {
            alert('Clicked');
        });
});

answered Apr 03 '17 at 09:42

Math10

1,043
11
15

I like this solution, but when I add it in a loop with multiple markers, then the link opens all the locations of my markers. I therefore tried to add an addition to the `myid` for each marker like this `'myid'+marker.id`. This results in `document.getElementById('myid'+marker.id)` is `null`, because the id is not attached to the infoWindow before the infoWindow is opened by a click. Can anybody give directions to solve this? – nicolaib Apr 14 '17 at 14:53
Could you please share your code (marker and info window construction code)? – Math10 Apr 15 '17 at 05:59
This problem has been plaguing me for a while, I just keep dodging this problem and working on other parts of the app. This worked like a charm. – Developer Gee Jun 22 '17 at 23:09
Excellent. I was looking for this hook. – Biranchi Jul 10 '17 at 19:54

score 2 · Answer 2 · answered May 29 '17 at 11:10

You could add unique id to your link element. I am using lat and lng since the location is going to be unique for each marker.

let infoWindow = new google.maps.InfoWindow({
    content :  `<p id = "myid` + lat + lng + `">Click</p>`
});

Then later,

google.maps.event.addListenerOnce(infoWindow, 'domready', () => {
    document.getElementById('myid' + lat + lng).addEventListener('click', () => {
            alert('Clicked');
        });
});

score 1 · Answer 3 · answered Mar 31 '17 at 00:43

1

Do you see any error in console? May be you are trying to access google.maps before its even initialized. First you need to ensure that google map library has loaded before calling any it by passing callback to script url. See https://developers.google.com/maps/documentation/javascript/adding-a-google-map for reference. Its better to use any libary like https://github.com/SebastianM/angular2-google-maps for working with maps in ionic framework.

answered Mar 31 '17 at 00:43

rohit anand

286
3
5

Thanks for the reply, i can see the popup, but i would like to customize the inforwindow, maybe add an ion card to it. Is this something i can do? Currently i have a div tag in the content with a paragraph tag and info in it. – inhaler Mar 31 '17 at 01:39
You should use marker.addListener to open an ionic-modal instead of using google.maps.infoWindow for showing details. – rohit anand Mar 31 '17 at 01:55
I thought about doing that, but the idea was to show some details first and then if the user wants to go to that location or know more then they click on the infowindow. I have seen this done in a few apps before. I just dont know how to implement it using ionic – inhaler Mar 31 '17 at 02:24
This might be useful. http://stackoverflow.com/questions/12102598/trigger-event-with-infowindow-or-infobox-on-click-google-map-api-v3 – rohit anand Mar 31 '17 at 02:31
Thanks alot, that is what i am looking for. I will go through it and implement it! – inhaler Mar 31 '17 at 02:40

Custom google maps infowindow using ionic 2

3 Answers3

Linked