javascript - Custom google maps infowindow using ionic 2 - Stack Overflow

admin管理员组

文章数量:1279208

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

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

• javascript
• google-maps
• ionic-framework
• ionic2

Share Improve this question Follow asked Mar 30, 2017 at 21:45 inhalerinhaler 42522 gold badges88 silver badges2020 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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 ponent 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');
        });
});

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

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./maps/documentation/javascript/adding-a-google-map for reference. Its better to use any libary like https://github./SebastianM/angular2-google-maps for working with maps in ionic framework.

本文标签： javascriptCustom google maps infowindow using ionic 2Stack Overflow