Google maps api v3: geocoding multiple addresses and infowindow

问题

I am trying to get infowindow for multiple addresses. Its creating markers but when I click on markers, infowindow is not popping up. Please help and see what could be wrong in this code. Rest all info is fine only issue is with infowindow not coming up.

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="height: 800px;"></div>

  <script type="text/javascript">
    var locations = [
      ['Bondi Beach', '850 Bay st 04 Toronto, Ont'],
      ['Coogee Beach', '932 Bay Street, Toronto, ON M5S 1B1'],
      ['Cronulla Beach', '61 Town Centre Court, Toronto, ON M1P'],
      ['Manly Beach', '832 Bay Street, Toronto, ON M5S 1B1'],
      ['Maroubra Beach', '606 New Toronto Street, Toronto, ON M8V 2E8']
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(43.253205,-80.480347),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

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

    var marker, i;

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

        geocoder.geocode( { 'address': locations[i][1]}, function(results, status) {
            //alert(status);
            if (status == google.maps.GeocoderStatus.OK) {

                //alert(results[0].geometry.location);
                map.setCenter(results[0].geometry.location);
                marker = new google.maps.Marker({
                    position: results[0].geometry.location,
                    map: map
                }); 

                google.maps.event.addListener(marker, 'mouseover', function() { infowindow.open(marker, map);});
                google.maps.event.addListener(marker, 'mouseout', function() { infowindow.close();});

            }
            else
            {
                alert("some problem in geocode" + status);
            }
        }); 
    }

  </script>
</body>
</html>

回答1:

You have the arguments to the google.maps.InfoWindow.open method backwards:

open(map?:Map|StreetViewPanorama, anchor?:MVCObject) | None | Opens this InfoWindow on the given map. Optionally, an InfoWindow can be associated with an anchor. In the core API, the only anchor is the Marker class. However, an anchor can be any MVCObject that exposes a LatLng position property and optionally a Point anchorPoint property for calculating the pixelOffset (see InfoWindowOptions). The anchorPoint is the offset from the anchor's position to the tip of the InfoWindow.

google.maps.event.addListener(marker, 'mouseover', function() { infowindow.open(marker, map);});

should be:

google.maps.event.addListener(marker, 'mouseover', function() { infowindow.open(map, marker);});

working example

回答2:

To avoid issues to do with the scope of marker, you can do one of two things

1

Make marker local to the geocoder.geocode() callback :

var marker = new google.maps.Marker({...});

And correct the order of the parameters passed to infowindow.open() :

google.maps.event.addListener(marker, 'mouseover', function() { infowindow.open(map, marker);});

2

Use this, to reliably refer back to the marker from within its own event handler, as follows :

google.maps.event.addListener(marker, 'mouseover', function() {
    infowindow.open(map, this);
});

Personally, I would use approach 2.

来源：https://stackoverflow.com/questions/17392375/google-maps-api-v3-geocoding-multiple-addresses-and-infowindow

标签

google-maps-api-3

infowindow