开发者

Google Maps Api v3: Info window displaying same information for all the markers on the map

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.

I'm able to get all markers to display once a search is performed, I can also get the info windows but the info displayed in all info windows is the same in all markers, 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:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>

<script type="text/javascript">

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+"<br />" +  addressobj[0].firstChild.data+"<br />" + phoneobj[0].firstChild.data+"<br />" +  emailobj[0].firstChild.data+"<br />"
          });

          // 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<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)

         }

      }

//added for loop to add markers

        for (i=0;i<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)


          }
  开发者_如何学运维 }
}

</script>
</head>

<body onload="load()">
   <form id="search">
      <input type="text" id="first" />
      <input type="button" value="Search Phonebook" onClick="sndReq()" />
   </form>
   <div id="theName"></div>
   <div id="address"></div>
   <div id="phone"></div>
   <div id="email"></div>
   <div id="mymap" style="width: 500px; height: 300px"></div>
</body>

</html>


I use this and it works... but I'm not a pro: my issue right now

 var image = 'http://localhost:3000/images/icons/map/icons/icehockey.png';
                                  var myLatlng_1 = new google.maps.LatLng(53.9515,-113.116);
                                  var contentString_1 =  "<b>Provident Place (formerly Redwater Multiplex) Ice Rink</b><br> Redwater, Alberta, Canada<br><b><a href='http://localhost:3000/rink/redwater/provident-place-formerly-redwater-multiplex'>Go To The Rink's Profile</a></b>";
                                  var infowindow_1 = new google.maps.InfoWindow({content: contentString_1});
                                  var marker_1 = new google.maps.Marker({
                                        position: myLatlng_1, 
                                        map: map, 
                                        icon: image
                                    });
                                  google.maps.event.addListener(marker_1, 'click', function() {
                                      infowindow_1.open(map,marker_1);
                                    });

                                  var myLatlng_2 = new google.maps.LatLng(53.4684,-113.409);
                                  var contentString_2 =  "<b>Ridgewood Skating Rink Ice Rink</b><br> Edmonton, Alberta, Canada<br><b><a href='http://localhost:3000/rink/edmonton/ridgewood-skating-rink'>Go To The Rink's Profile</a></b>";
                                  var infowindow_2 = new google.maps.InfoWindow({content: contentString_2});
                                  var marker_2 = new google.maps.Marker({
                                        position: myLatlng_2, 
                                        map: map, 
                                        icon: image
                                    });
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜