CODEWITHSUNDEEP
javascriptgoogle-mapsionic-frameworkionic2
inhaler
inhaler

Reputation: 425

Custom google maps infowindow using ionic 2

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);
}

Upvotes: 2

Views: 3908

Answers (3)

Vishal
Vishal

Reputation: 365

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');
        });
});

Upvotes: 2

Math10
Math10

Reputation: 1043

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');
        });
});

Upvotes: 10

rohit anand
rohit anand

Reputation: 296

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.

Upvotes: 1

Related Questions