Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

google maps api multiple markers with info windows

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.

like image 273
Louis van Tonder Avatar asked Feb 02 '12 12:02

Louis van Tonder


2 Answers

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);
    });
} 
like image 174
duncan Avatar answered Dec 29 '22 21:12

duncan


create global infowindow object. var infowindow = new google.maps.InfoWindow();

and add listener for your global marker.

google.maps.event.addListener(marker, "click", function (e) {
            infowindow.setContent("set marker specific content here");
            infowindow .open(map, this);
        });
like image 30
Ramesh Kotha Avatar answered Dec 29 '22 20:12

Ramesh Kotha