Google Maps API Geocoding Multiple Locations

问题

I've set up a little js code to geocode some locations and place than on a map. I can easily do one location, but I can't get it to work for two locations. My working code is below, but is only for one location.

var geocoder = new google.maps.Geocoder();
    var address = "Melbourne";

    geocoder.geocode( { 'address': address}, function(results, status) {

        var latitude = results[0].geometry.location.lat();
        var longitude = results[0].geometry.location.lng();


        initialize(latitude,longitude);

        }); 


    function initialize(latitude,longitude) {
        var latlng1 = new google.maps.LatLng(latitude,longitude);

        var myOptions = {
          zoom: 2,
          panControl: false,
            zoomControl: false,
            mapTypeControl: false,
            streetViewControl: false,
          center: latlng1,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          mapTypeControl: false,
          scrollwheel: false,
        };
        var map = new google.maps.Map(document.getElementById("google-container"),myOptions);

        var marker = new google.maps.Marker({
          position: latlng1, 
          map: map, 
        }); 
      }

I've tried to add a second with the below but I am clearly missing some thing. As you may guess I am new to javascript.

    var geocoder = new google.maps.Geocoder();
var address = "Seoul";
var address2 = "Melbourne";

geocoder.geocode( { 'address': address}, function(results, status) {

    var latitude = results[0].geometry.location.lat();
    var longitude = results[0].geometry.location.lng();
    var latitude2 = r


    initialize(latitude,longitude);

    }); 

    geocoder.geocode( { 'address': address2}, function(results, status) {

    var latitude2 = results[0].geometry.location.lat();
    var longitude2 = results[0].geometry.location.lng();
    var latitude2 = r


    initialize(latitude2,longitude2);

    }); 


function initialize(latitude,longitude) {
    var latlng1 = new google.maps.LatLng(latitude,longitude);
    var latlng2 = new google.maps.LatLng(latitude2,longitude2);

    var myOptions = {
      zoom: 2,
      panControl: false,
        zoomControl: false,
        mapTypeControl: false,
        streetViewControl: false,
      center: latlng1,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,
      scrollwheel: false,
    };
    var map = new google.maps.Map(document.getElementById("google-container"),myOptions);

    var marker = new google.maps.Marker({
      position: latlng1, 
      map: map, 
    }); 
      var marker2 = new google.maps.Marker({
      position: latlng2, 
      map: map, 
    }); 
  }

Any ideas would be most welcome!

回答1:

This solution works for two, perhaps up to 10 locations, after that you will start running into the query and rate limits on the Geocoder

1. separate out the initialize function, just initializes the map
2. create a unique geocoder instance for each location (you can reuse the same geocoder instance by reusing it in the call back, not worth it for two points).

working fiddle

working code snippet:

function initialize() {
    var myOptions = {
        zoom: 2,
        panControl: false,
        zoomControl: false,
        mapTypeControl: false,
        streetViewControl: false,
        center: {
            lat: 0,
            lng: 0
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false,
        scrollwheel: false,
    };
    var bounds = new google.maps.LatLngBounds();
    var map = new google.maps.Map(document.getElementById("google-container"), myOptions);
    var geocoder = new google.maps.Geocoder();
    var address = "Seoul";

    geocoder.geocode({
        'address': address
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({
                position: results[0].geometry.location,
                map: map,
            });
            bounds.extend(results[0].geometry.location);
            map.fitBounds(bounds);
        } else {
            alert("Geocode of " + address + " failed," + status);
        }
    });
    var geocoder2 = new google.maps.Geocoder();
    var address2 = "Melbourne";
    geocoder2.geocode({
        'address': address2
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({
                position: results[0].geometry.location,
                map: map,
            });
            bounds.extend(results[0].geometry.location);
            map.fitBounds(bounds);

        } else {
            alert("Geocode of " + address2 + " failed," + status);
        }
    });
}
google.maps.event.addDomListener(window, 'load', initialize);

html, body, #google-container {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="google-container" style="border: 2px solid #3872ac;"></div>

来源：https://stackoverflow.com/questions/28320267/google-maps-api-geocoding-multiple-locations