單個頁面上有多個Google地圖？

Question

我試圖在單個頁面上顯示多個Google地圖。 這是一個結果頁面，該頁面根據區域中的每個位置動態生成。 每個div都有一個我要用來運行Google Map的地圖類。 截至目前，我只能獲取它來處理一個div的信息。

我了解我需要以某種方式將Google Maps傳遞給數組。 但是考慮到實現的用途，我對如何執行此操作感到困惑。

HTML

<div class="map" data-address="123 easy st city st zip" data-title="location"></div>
<div class="map" data-address="456 easy st city st zip" data-title="location 2"></div>

jQuery的

$('.map').each(function() {

    var geoCode = new google.maps.Geocoder(), 
    container = this;

    geoCode.geocode({'address': $(container).data('address')}, function(results, status) {
    var start_options = 0;

    if (status == google.maps.GeocoderStatus.OK) {
         var mapOptions = {
             zoom: 14,
             center: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()),
             zoomControl: true,
             scaleControl: false,
             scrollwheel: false,
             disableDefaultUI: true,
             mapTypeId: google.maps.MapTypeId.ROADMAP,

         }

         if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android|Blackberry|Windows Phone|Nokia|HTC|webOS)/)) {
                 mapOptions.draggable=false;
        }

        var map = new google.maps.Map(document.getElementById("map"), mapOptions);

        var marker = new google.maps.Marker({
            position: results[0].geometry.location,
            animation: google.maps.Animation.DROP,
            map: map,
            title: $(this).data('itemTitle')
        });

        google.maps.event.addListener(marker, 'click', toggleBounce);

        function toggleBounce() {
              if (marker.getAnimation() != null) {
                marker.setAnimation(null);
              } else {
                marker.setAnimation(google.maps.Animation.BOUNCE);
              }
        }

        var center;
        function calculateCenter() {
            center = map.getCenter();
        }

        google.maps.event.addDomListener(map, 'idle', function() {
            calculateCenter();
        });

        google.maps.event.addDomListener(window, 'resize', function() {
            map.setCenter(center);
        });
    } else {
        $(this).parent().hide();
    }
});
}); 

Answer 1

在forEach循環中，您正在使用document.getElementById("map") 。

這是錯誤的，原因有兩個，首先是因為地圖沒有id，而是有類，其次是因為地圖每次都會附加到同一元素。

您要做的是將地圖附加到循環中的當前地圖。 在您的jQuery循環中，這將是this變量。

便利地（作為this可以經常嵌套函數內變化），你的循環存儲的第一行this一個變量被稱為container 。

因此，只需將container 。替換為document.getElementById("map") ，您就應該在.map元素的每個實例上附加一個不同的地圖。

Answer 2

1. 為您的div分配ID屬性
2. 使用一個參數>容器將Google Map代碼包裝在一個函數中
3. 調用函數

function getGoogleMap(container) 
{
    //google code 
    //use the container parameter like so

    geoCode.geocode({'address': $("#" + container).data('address')});
    //or so
    var map = new google.maps.Map(document.getElementById(container), mapOptions);
}
getGoogleMap("map1");