google api infoWindow displaying under 1 marker on google maps api

Question

I'm having a problem with the new google maps api when adding multiple markers and displaying infowindow for each marker, all my markers are showing but my main problem is that the infoWindow always shows at one place,I've looked everywere but can't seem to find the right solution, all my information that is to be displayed is coming from the database so i use the xmlhttp.responseText to get the info from another function which is getData.

My code is as below

  function showMap(data){     

 //Changing the json respose back to the javascript array
    var LongLat = eval( '(' + data + ')');

   // Creating a new map
    var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(-26.1981, 28.0488),
    zoom: 5,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});


for (var i = 0; i < LongLat.length; i++) {

    latLng = new google.maps.LatLng(LongLat[i][0],LongLat[i][1]); 

    // Creating a marker and putting it on the map
    var marker = new google.maps.Marker({
    position:latLng,
    map: map,
    title: LongLat[i][0]
    });


    var infoWindow = new google.maps.InfoWindow();
    // Attaching a click event to the current marker

    google.maps.event.addListener(marker, "click", function(point){ 
        getData(this.position);
        xmlhttp.onreadystatechange=function()
        {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                infoWindow.setContent(xmlhttp.responseText);
                infoWindow.open(map,marker);
            }
        }               
        });
    }
 }

and my getData function is as follows

function getData(d){

//separating the object to lantitude and longtitude p = (d.toString());

c = p.indexOf(',');
e = p.indexOf(')');
lat = p.substring(1,c);
lon = p.substring(c+1,e);

if(d == "results"){
    var htmlCode = t;
}

if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest(); 
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById('results').innerHTML = xmlhttp.responseText;
        }
    }

    if(xmlhttp.readyState==4 && xmlhttp.status==200){
        alert(xmlhttp.responseText);
        return xmlhttp.responseText;
    }
var html = xmlhttp.open("GET","mapmaker.php?lat="+lat+"&lon="+lon,true);
xmlhttp.send();
 }

Answer 1

Your code, almost, is good :) Just few mistakes:

Put map, infoWindow as global

    var map = null;
    var infoWindow = null;

    function initialize()
    {
        // Fill w/ sample data
        var LongLat = new Array();
        LongLat[0] = new Array(-26.5, 28.5);
        LongLat[1] = new Array(-26.0, 28.0);

        // Creating a new map
        map = new google.maps.Map(document.getElementById("map-canvas"), {
            center: new google.maps.LatLng(-26.1981, 28.0488),
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        infoWindow = new google.maps.InfoWindow();

        for(var i = 0; i < LongLat.length; i++)
        {
            var latLng = new google.maps.LatLng(LongLat[i][0], LongLat[i][1]);

            AddMarkerToMap(latLng, i);

        }  // END FOR ( LatLng)
    }

Move marker creation to separate function. This will hide variables from changing

    function AddMarkerToMap(latLng, i)
    {
        var marker = new google.maps.Marker({
            position:latLng,
            map:map
        });

        google.maps.event.addListener(marker, 'click', function()
        {
            infoWindow.setContent("Title: " + i);
            infoWindow.open(map, marker);
        });
    }

Answer 2

I think its better to reuse 1 infoWindow. Have a look at this snippet which works for me:

var infowindow = new google.maps.InfoWindow();


function addToMap() {

    for (var i = 0; i < marker_data.length; i++) {

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(marker_data[i].lat, marker_data[i].lng),
            clickable: true,
            id:marker_data[i].id
        });

        google.maps.event.addListener(marker, "click", function() {
            infowindow.close();
            load_content(this, this.id);
        });

        marker.setMap(map);

        /* here we keep track of the markers that we have added to the page */
        markers_on_map.push(marker);
    }
}

function load_content(marker, id){
    $.ajax({
        url: '/map/getMarkerWindow/' + id,
        success: function(data){
            infowindow.setContent(data);
            infowindow.open(map, marker);
        }
    });
}