5

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.

2 Answers 2

10

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);
    });
} 
6
  • hey, thanks for the code and explanation. YOur code breaks the 2nd marker.... First one is displayed, not with no info window, 2nd marker is gone.. If I remove the bindInfoWindow(marker_obj, map, infowindow, 'Marker 1'); lines , both markers show... any ideas? P.s. is there not a nice online IDE or something that can help me format my java code blocks etc? Feb 2, 2012 at 13:01
  • infowindow is not defined [Break On This Error] bindInfoWindow(marker_obj, map, infowindow, 'This is info for marker 1'); Feb 2, 2012 at 13:38
  • 1
    Did you remember and put in the first bit, prior to calling that function, var infowindow = ...? Remember Javascript is case-sensitive
    – duncan
    Feb 2, 2012 at 13:42
  • ye, hah, did not have it decalred on top.. wokring like a charm now!!!, thanks man. P.s., I plan to dynamically build jave script, and then inject/add it to the page at runtime. I am mainly developing in asp.net, and want to create this whole long java script with lets say, 200 markers , and then pass the script to the page... Any major objections I should be aware off? Feb 2, 2012 at 13:56
  • 1
    if you're doing 200 markers I'd say write a loop in the javascript which creates the markers and calls the bindInfoWindow function. The loop should be over an array or structure which has been created by your ASP.net as a javascript variable. This should ensure your Javascript is more concise.
    – duncan
    Feb 2, 2012 at 14:41
2

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);
        });
4
  • Hi, I add var infowindow = new google.maps.infowindow(); just below my map obj decleration, , but errors that infowindow is not a constructor Feb 2, 2012 at 13:39
  • That's because Javascript is case-sensitive, it should be InfoWindow not infowindow
    – duncan
    Feb 2, 2012 at 13:41
  • Thanks guy, got the first eample working, will test yours also, thanks. Feb 2, 2012 at 13:57
  • Ok, this option also works... thanks. So which of the two is better / more efficient? Feb 2, 2012 at 14:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.