Question

just getting my teeth sunk into google maps API.

I am attempting to plot a couple of markers on a map. Done. I am however recycling a variable/object for each marker.

I initially create marker with options and add to map, then take the same marker variable, repurpose it, and add it to map again. This does produce two unique markers with individual title tags.

I want to display an info window for each marker, but am in doubt as to what is the best way to do it. I also see a trouble flag popping up with assigning click events to each marker, as I am using the same variable to add each marker, I am not sure how to add its click event to the unique markers (by name, as name is the same for both, as it never receives any id?)

var marker_obj = new google.maps.Marker({
    position: myLatlng,
    title:"This is Marker 1",
});

marker_obj.setMap(map);

marker_obj = new google.maps.Marker({
    position: myLatlng,
    title:"This is Marker 2",
});

marker_obj.setMap(map);

For creating the info windows, I thought of using one variable/object to keep the info window in, and then repurposing it with new text in each marker click event.

Questions that I have are:

1: Should I use a seperate unique variable/object for each marker (overheads?), if not, how do I identify its click event.

2: Is it fine to repurpose (re-assign) the info window object with new text before its popped, or should I create a unique info window for each marker?

I am a bit of a Java n00b, so any help would greatly be appreciated.

Answer 1

You’re on the right lines. Have one infowindow object just as you have one marker object. Then the content of the infowindow changes depending on which marker you click. One thing to watch out for (this also happens if you’re creating markers within a loop), is that the danger is that all the infowindows end up with the content of the last one. So let’s create a new function that updates the content.

Also, as an aside, you don’t have to call the setMap() function on your marker objects, you can just specify the map attribute in the options you pass when you create the markers.

var infowindow = new google.maps.InfoWindow({
    content: ''
});

var marker_obj = new google.maps.Marker({
    position: myLatlng,
    title:"This is Marker 1",
    map: map
});

bindInfoWindow(marker_obj, map, infowindow, 'Marker 1');

marker_obj = new google.maps.Marker({
    position: myLatlng,
    title:"This is Marker 2",
    map: map
});

bindInfoWindow(marker_obj, map, infowindow, 'Marker 2');

Then a new function:

function bindInfoWindow(marker, map, infowindow, html) {
    marker.addListener('click', function() {
        infowindow.setContent(html);
        infowindow.open(map, this);
    });
}