Databases
StackOverflow2013
Postsdbo
POGoogle Maps Api v3: Info window displaying same information for all the markers on the map
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGoogle Maps Api v3: Info window displaying same information for all the markers on the map
    primarykey
    data
    text
    <p>I'm working on this code for a certificate program, I tried to get some help from the instructors but they don't seem familiar with Google Map Apis and the requirement is to display multiple markers from addresses stores in an XML file once a search is performed, i.e I look for John, I get his markers in addition to markers for all of the people whose address is stored and specified in my XML file. So the goal is to be able to display say 5 markers for 5 people and their respective info windows.</p> <p>I'm able to get all markers to display once a search is performed, I can also get the info windows <strong>but the info displayed in all info windows is the same in all markers</strong>, it displays the information for the name searched for. You could if you want test with the name Larry, zoom out to other markers and see that they all display the same name. I have no idea why? When I looked at fixes, I found nothing for google API v3 only stuff link a bindEvent for the Api v2. Any help would be highly appreciated, I don't know how to stop the for loop from making all the info windows the same. Thanks. The code is bellow: <br> </p> <pre><code>&lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt; &lt;/script&gt; &lt;script type="text/javascript"&gt; var geocoder; var map; var marker; function load() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(37.4419, -122.1419); var myOptions = { zoom: 13, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("mymap"), myOptions); } function showAddress(theAddress) { var myaddress = theAddress if (geocoder) { geocoder.geocode( { 'address': myaddress}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert("Geocode was not successful for the following reason: " + status); } }); } } function showAllAddress(AllAddress) { var myaddress = AllAddress if (geocoder) { geocoder.geocode( { 'address': myaddress}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); // Create Info Window var infowindow = new google.maps.InfoWindow({ content: document.getElementById("theName").innerHTML = fiobj[0].firstChild.data + " " + lastobj[0].firstChild.data+"&lt;br /&gt;" + addressobj[0].firstChild.data+"&lt;br /&gt;" + phoneobj[0].firstChild.data+"&lt;br /&gt;" + emailobj[0].firstChild.data+"&lt;br /&gt;" }); // click event for marker google.maps.event.addListener(marker, 'click', function() { // Opening the InfoWindow infowindow.open(map, marker); }); } else { alert("Geocode was not successful for the following reason: " + status); } }); } } function createRequestObject() { var ro var browser = navigator.appName if(browser == "Microsoft Internet Explorer"){ ro = new ActiveXObject("Microsoft.XMLHTTP") }else{ ro = new XMLHttpRequest() } return ro } var http = createRequestObject() function sndReq() { http.open('get', 'http://idrir.userworld.com/ajax/gmap.xml', true) http.onreadystatechange = handleResponse http.send(null) } function handleResponse() { if(http.readyState == 4){ document.getElementById("theName").innerHTML = "" document.getElementById("address").innerHTML = "" document.getElementById("phone").innerHTML = "" document.getElementById("email").innerHTML = "" var response = http.responseXML.documentElement listings=response.getElementsByTagName("LISTING") for (i=0;i&lt;listings.length;i++) { firstobj = listings[i].getElementsByTagName("FIRST") if (firstobj[0].firstChild.data == document.getElementById("first").value){ fiobj = listings[i].getElementsByTagName("FIRST") lastobj = listings[i].getElementsByTagName("LAST") addressobj = listings[i].getElementsByTagName("ADDRESS") phoneobj = listings[i].getElementsByTagName("PHONE") emailobj = listings[i].getElementsByTagName("EMAIL") //do not use this code bellow // document.getElementById("theName").innerHTML = firstobj[0].firstChild.data + " " + lastobj[0].firstChild.data // document.getElementById("address").innerHTML = addressobj[0].firstChild.data // document.getElementById("phone").innerHTML = phoneobj[0].firstChild.data // document.getElementById("email").innerHTML = emailobj[0].firstChild.data theAddress = addressobj[0].firstChild.data showAddress(theAddress) } } </code></pre> <p>//added for loop to add markers</p> <pre><code> for (i=0;i&lt;listings.length;i++) { fobj = listings[i].getElementsByTagName("FIRST") lobj = listings[i].getElementsByTagName("LAST") aobj = listings[i].getElementsByTagName("ADDRESS") pobj = listings[i].getElementsByTagName("PHONE") eobj = listings[i].getElementsByTagName("EMAIL") AllAddress = aobj[0].firstChild.data showAllAddress(AllAddress) } } } &lt;/script&gt; &lt;/head&gt; &lt;body onload="load()"&gt; &lt;form id="search"&gt; &lt;input type="text" id="first" /&gt; &lt;input type="button" value="Search Phonebook" onClick="sndReq()" /&gt; &lt;/form&gt; &lt;div id="theName"&gt;&lt;/div&gt; &lt;div id="address"&gt;&lt;/div&gt; &lt;div id="phone"&gt;&lt;/div&gt; &lt;div id="email"&gt;&lt;/div&gt; &lt;div id="mymap" style="width: 500px; height: 300px"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USdronnac
    plurals
    1. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload