Google Maps Геокодирование и нанесение на карту нескольких местоположений

Я пытаюсь реализовать скрипт, который будет геокодировать и отображать все местоположения массива на карте. Я стек, потому что я не могу заставить карту соответствовать всем маркерам, добавленным на экран. Я потерял много часов, пробуя несколько методов, и вот что я придумал:

<!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>
  <script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
  <script>

    var geocoder;
    var map;
    var markersArray = [];
    var bounds;

    //plot initial point using geocode instead of coordinates (works just fine)
    function initialize() {
        geocoder = new google.maps.Geocoder();
        bounds = new google.maps.LatLngBounds ();
        latlang = geocoder.geocode( { 'address': '5th Avenus New Yort'}, function(results, status) { 
            if (status == google.maps.GeocoderStatus.OK) {

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

                markersArray.push(marker);
            }
            else{
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
        var myOptions = {
            center: latlang, 
            zoom: 2, 
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            navigationControlOptions: {
                style: google.maps.NavigationControlStyle.SMALL
            }
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


        plotMarkers();
      }


        var locationsArray = [
            ['Google Official','1600 Amphitheatre Parkway, Mountain View, USA'],
            ['Google 1','112 S. Main St., Ann Arbor, USA'], 
            ['Google 2','10 10th Street NE, Suite 600 USA']
        ];

        function plotMarkers(){
            for(var i = 0; i < locationsArray.length; i++){
                console.log(locationsArray[i][1]);
                //codeAddresses(locationsArray[i]);
            }

            //map.fitBounds (bounds);
        }

        function codeAddresses(address){
            geocoder.geocode( { 'address': address}, function(results, status) { 
                if (status == google.maps.GeocoderStatus.OK) {

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


                        bounds.extend (new google.maps.LatLng (results[0].geometry.location.ib,results[0].geometry.location.hb));
                        //console.log(bounds);

                    markersArray.push(marker); 
                }
                else{
                    alert("Geocode was not successful for the following reason: " + status);
                }
            });
        }

        google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</head> 
<body>
  <div id="map_canvas" style="width: 100%; height: 700px;"></div>
</body>
</html>

Может ли кто-нибудь помочь мне в этом, потому что кажется, что я собираюсь придерживаться этой версии навсегда.

Цели у меня следующие: 1. Привязать отображаемую карту, чтобы отображались все маркеры, расставленные на карте. 2. Добавьте информационное окно с названием местоположения.

Буду признателен за любую помощь!

С уважением ко всем вам, Ник


google-maps google-maps-api-3 google-geocoding-api
person nickast    schedule 27.02.2013    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Что вам нужно сделать, так это расширить свой объект bounds по мере добавления каждого маркера. Затем, добавив их все, вызовите fitBounds, чтобы перерисовать карту с соответствующим уровнем масштабирования для этого ограничивающего объекта.

Добавляйте InfoWindow в цикл по мере создания маркеров, привязанных к каждому маркеру. Это сработало для меня:

var geocoder;
var map;
var markersArray = [];
var bounds;
var infowindow =  new google.maps.InfoWindow({
    content: ''
});

//plot initial point using geocode instead of coordinates (works just fine)
function initialize() {
    geocoder = new google.maps.Geocoder();
    bounds = new google.maps.LatLngBounds ();

    var myOptions = {
        zoom: 2, 
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
        }
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    geocoder.geocode( { 'address': '5th Avenus New Yort'}, function(results, status) { 
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);

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

            bounds.extend(results[0].geometry.location);

            markersArray.push(marker);
        }
        else{
            alert("Geocode was not successful for the following reason: " + status);
        }
    });

    plotMarkers();
}

var locationsArray = [
    ['Google Official','1600 Amphitheatre Parkway, Mountain View, USA'],
    ['Google 1','112 S. Main St., Ann Arbor, USA'], 
    ['Google 2','10 10th Street NE, Suite 600 USA']
];

function plotMarkers(){
    var i;
    for(i = 0; i < locationsArray.length; i++){
        codeAddresses(locationsArray[i]);
    }
}

function codeAddresses(address){
    geocoder.geocode( { 'address': address[1]}, function(results, status) { 
        if (status == google.maps.GeocoderStatus.OK) {
            marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });

            google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent(address[0]);
                infowindow.open(map, this);
            });

            bounds.extend(results[0].geometry.location);

            markersArray.push(marker); 
        }
        else{
            alert("Geocode was not successful for the following reason: " + status);
        }

        map.fitBounds(bounds);
    });
}

google.maps.event.addDomListener(window, 'load', initialize);
person duncan    schedule 27.02.2013
comment
Это отлично сработало! Большое спасибо Дункан! Я застрял! - person nickast; 28.02.2013
comment
Привет, ребята, я попробовал этот код, и он сработал довольно хорошо, за исключением того, что он поместил дополнительный маркер без информации о пузырьках... как вы избавитесь от этого маркера? - person Damien; 17.07.2013