Google Maps API Геокодирование нескольких мест

Question

Я установил небольшой JS-код, чтобы геокодировать некоторые места и места, чем на карте. Я легко могу сделать одно местоположение, но я не могу заставить его работать в двух местах. Мой рабочий код ниже, но только для одного места.

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, 
        }); 
      }

Я попытался добавить секунду ниже, но я явно упускаю кое-что. Как вы можете догадаться, я новичок в 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, 
    }); 
  }

Любые идеи будут приветствоваться!

Answer 1

Это решение работает для двух, возможно, до 10 местоположений, после чего вы начнете работать с запросом и ограничениями скорости на геокодере.

1. отделить функцию инициализации, просто инициализирует карту
2. создайте уникальный экземпляр геокодера для каждого местоположения (вы можете повторно использовать один и тот же экземпляр геокодера, повторно используя его в обратном вызове, не стоив его в течение двух пунктов).

рабочая скрипка

фрагмент рабочего кода:

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>

Answer 2

here is some code optimization allows to process multiple addresses
      <div id="map-canvas"
   style='position: relative; height: 100%; width: 100%; margin-left: 0px; border: #B8B6B8 solid 1px;; background-color: #ffffff;'>
  </div> 
<script type="text/javascript">
    var geocoder;
    var map;
    function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var mapOptions = {
            zoom : 17,
            center : latlng,
            mapTypeId : google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    }
    function codeAddress(addressList) {
        try {
            var icount = addressList.length;
            for (var i = 0; i < icount; i++) {
                getGeoCoder(addressList[i]);
            }
        } catch (error) {
            alert(error);
        }
    }

    function getGeoCoder(address) {
        geocoder.geocode({
            'address' : address
        }, 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 {
                geterrorMgs(address); // address not found handler
            }
        });
    }
    //client's call
//addresses list to be processed
    var addressList = [ '1420 orchardview dr Pittsburgh,  PA,  USA', '1440 orchardview dr Pittsburgh,  PA,  USA', '1410 orchardview dr Pittsburgh,  PA,  USA' ];
        initialize();  
        codeAddress(addressList);
</script>