0

配列のすべての位置をジオコーディングしてマップにプロットするスクリプトを実装しようとしています。画面に追加されたすべてのマーカーにマップを合わせることができないため、スタックしています。いくつかの方法を試して何時間も無駄にしましたが、これが私が思いついたものです：

<!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. 場所の名前を含む infoWindow を追加します。

どんな助けにも感謝します！

よろしくお願いします、ニック

4

1 に答える 1

4

必要なことは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);
于 2013-02-27T13:54:45.267 に答える