1

I have a separate php file in which I retrieved addresses from a mysql database and output a xml file. then using ajax I tried to get those addresses and plot in google maps. Multiple infoWindow is my problem. I have struggled for many hours, please do help.

Here is my code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
    <style>
    html, body {
    height: 100%;
    margin: 0;
    padding: 0;
               }
    #map       {
    height: 100%;
               }
    </style>
<script src="https://maps.googleapis.com/maps/api/js?signed_in=true">   </script> 
<script>
function loadXMLDoc(url)
   {
   var map;
   var mapOptions =        {
   zoom: 13,
   center: {lat:8.719910, lng: 77.740626}
                           };
   map = new google.maps.Map(document.getElementById('map'),
   mapOptions);
   var xmlhttp;
   var txt,x,xx,i,out1,out2,out3,out4;
   var markers=[];
   var infoWindow = new google.maps.InfoWindow ;
   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)
   {
    x=xmlhttp.responseXML.documentElement.getElementsByTagName("details1");
    for(i=0;i<x.length;i++)
      {
    xx=x[i].getElementsByTagName("Latitude");
    out1=xx[0].firstChild.nodeValue;
    xx=x[i].getElementsByTagName("Longitude");
    out2=xx[0].firstChild.nodeValue;
    xx=x[0].getElementsByTagName("Nameoforg");
    out3=xx[0].firstChild.nodeValue;
    xx=x[0].getElementsByTagName("Phoneno");
    out4=xx[0].firstChild.nodeValue; 
    var html = '<p>Donor Location:' +'Nameoforg'+' '+out3+'Phoneno'+out4+' '+ '</p>' ;     
    markers.push(new google.maps.Marker({
    position: { lat:parseFloat(out1), lng: parseFloat(out2)},
    map: map     
                                       }));
    bindinfo(markers[i], map, infoWindow, html);
       }
    document.getElementById('txtCDInfo').innerHTML=html;

    } 
    }
    xmlhttp.open("GET",url,true);
    xmlhttp.send(); 
    }
    function bindinfo(marker, map, infoWindow, html) {
    google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
                                                            });
                                                      }
    </script>
    </head>
    <body onload="loadXMLDoc('mapxml.php')",initialize()>
    <div id="txtCDInfo"></div>
    <div id="map">
    </div>
    </body>
    </html>
enigma
  • 3,476
  • 2
  • 17
  • 30
Moyna
  • 21
  • 2
  • Related question: [Google Maps JS API v3 - Simple Multiple Marker Example](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example). If that doesn't help, please provide a [Minimal, Complete, Tested and Readable example](http://stackoverflow.com/help/mcve) that demonstrates the issue, including some sample XML data. – geocodezip Oct 01 '15 at 13:03

1 Answers1

0

You should initialize infoWindow every time like this: 

 function bindinfo(marker, map, infoWindow, html) {
    var infoWindow = new google.maps.InfoWindow({
        content: html
    });
        google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
                                                                });
                                                          }
Maha Dev
  • 3,915
  • 2
  • 31
  • 50
  • Thank you .. but still it does not work. am getting same info that is data from last row of databse seems to be visible when clicking every marker.. :( – Moyna Oct 01 '15 at 14:36
  • might be a query error. because by declaring inofWindow every time solved my problem – Maha Dev Oct 02 '15 at 04:58