Question

I’m quite new to Google Maps API 3 and can’t figure out the following error: All clicks on my markers open the infowindow on the same marker (bad), but with different text (good).
I’m pulling the data out of wordpress custom meta data into an xml, which i then parse; What makes me wondering is the fact that generating the markers works this way, but adding the listener for the infowindow obviously fails.

Any ideas what’s happening here?

Live demo at:
http://goo.gl/9seK9

Code

$(document).ready(function(){

    var infowindow;
    var latlng = new google.maps.LatLng(47.580231,13.771362);
    var settings = {
        zoom: 8,
        center: latlng,
        panControl: true,
        zoomControl: true,
        mapTypeControl: true,
        disableDefaultUI:true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), settings);


    jQuery.get("http://rundumadum.eu/de/wp-content/themes/rud/rundumadumMap.xml", {}, function(data) {
        var xmllength = $(data).find("mymarkers").children().size();
        var supermarkers = [];

        jQuery(data).find("mymarker").each(function() {
                var myid = $(this).find("id").text();
                var mytitle = $(this).find("title").text();
                var mylink = $(this).find("link").text();
                var mylocation = $(this).find("location").text();

                var mysplits = mylocation.split(",");
                var mylat = mysplits[0];
                var mylng = mysplits[1];
                var mylatlng = new google.maps.LatLng(parseFloat(mylat), parseFloat(mylng));  
                var myinfo = "<a href="+mylink+">"+mytitle+"</a>";
                var marker = createMyMarker(mytitle, myinfo, mylink, mylatlng);
        });
    });


    function createMyMarker(mytitle, myinfo, mylink, mylatlng) {
        marker = new google.maps.Marker({
            position: mylatlng, 
            map: map,
            clickable:true,
            icon:'http://rundumadum.eu/de/wp-content/themes/rud/static/img/markerTest.png',
            html: '<a href="'+mylink+'">'+mytitle+'</a>'
        });

        google.maps.event.addListener(marker, "click", function() {
            if (infowindow) infowindow.close();
            infowindow = new google.maps.InfoWindow({content: myinfo});
            infowindow.open(map, marker);
        });
    }
    return marker;

});

Would be grateful for any ideas …

Answer 1

One thing I notice is that the marker you are creating in createMyMarker is not declared using var marker, so it looks like you are inadvertently creating a global marker reference. Also, it appears that the statement: return marker is actually after the end of your createMyMarker function, although that may just be a typo that was introduced when you set up your code sample in your question.

At any rate, I believe if you change the code in createMyMarker to declare the marker using var marker within that function, it will give you better results.