1つのページに複数のGoogleマップ - Map API 3

Question

1つのJSPページに複数のマップを配置する必要があるscenerioがあります。そしてオフコースでは、私はマーカーとポリゴンを別々にハンドリングする必要があります。

私が考えている戦略は、マップIDをキーとしてhashmapのマップを作ることです。

var mapInfo = {mapkey:'',map:''}; 

地図オブジェクトをmapInfo.mapに配置し、mapkeyを文字列IDにします。

しかし、それぞれのマップにマーカーを配置することはできません。ハッシュからマップオブジェクトを取得するロジックを削除した場合それはうまく動作します。

私はそれにポインタが必要です。ハッシュからマップオブジェクトを取得することは理にかなっています。グローバルマップオブジェクトは必要ありません。私は配列やハッシュからそれをしたい。これは私が考えていることです。続き

は私の初期化とマーカーコードを置くことである。

var geocoder; 
var mapHash = []; 
var bound = new google.maps.LatLngBounds(); 

function initMap(map_container_div) { 
geocoder = new google.maps.Geocoder(); 

var latlng = new google.maps.LatLng(38.5111, -96.8005); 
var myOptions = { 
    zoom:4, 
    center:latlng, 
    mapTypeId:google.maps.MapTypeId.ROADMAP, 
    streetViewControl: false 
}; 

var map = new google.maps.Map(document.getElementById(map_container_div), myOptions); 

if (!getMap(map_container_div)){ 
    var mapInfo = {mapkey:'',map:''}; 
    mapInfo.map = map; 
    mapInfo.mapKey = map_container_div; 
    mapHash.push(mapInfo); 
    } 
    } 

    function palceMarker(myAddress, mapId){ 
    map = getMap(mapId); 
    //alert(myAddress + mapId + map)  
       geocoder.geocode({'address':myAddress}, function (results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
       var marker = new google.maps.Marker({ 
       map:map, 
       position:results[0].geometry.location, 
       title: results[0].formatted_address 
      }); 
     bound.extend(results[0].geometry.location); 
     map.fitBounds(bound); 
     // alert(marker); I got an object here 

    } 
}); 
} 

     function getMap(mapKey){ 

for (var i = 0 ; i < mapHash.length ; i++){  
    if (mapHash[i].mapKey == mapKey){   
     return mapHash[i].map; 
    } 
} 
return false; 
    } 

Answer 1

あなたのコードが正しく動作し、あなたが行うことを計画しているように、マップオブジェクトをハッシュすることができるはずです。正しく機能しないのは、住所のジオコーディングを処理する方法です。ジェコーディング要求を開始するたびに、ジオコーダオブジェクトのインスタンスが1つしかないため、マップ参照にはページ上の最後のマップのみが含まれます。 2つの選択肢があります。別のジオコーディング要求を行う前にジオコーダー（placeMarker関数）が終了したかどうかを確認するタイマーを作成するか、それとも、あなたはどのように作成するために私を助けることができる....ここ

は、たとえば、私はあなたの答えは私にとって非常に有用である

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script> 
    var mapHash = []; 
    var bound = new google.maps.LatLngBounds(); 
    finishedCoding = false; 
    function initMap(map_container_div) { 

     var latlng = new google.maps.LatLng(38.5111, -96.8005); 
     var myOptions = { 
      zoom:4, 
      center:latlng, 
      mapTypeId:google.maps.MapTypeId.ROADMAP, 
      streetViewControl: false 
     }; 

     var map = new google.maps.Map(document.getElementById(map_container_div), myOptions); 

     if (!getMap(map_container_div)) { 
      var mapInfo = { 
       mapkey:'', 
       map:'', 
       geocoder : new google.maps.Geocoder() 
      }; 
      mapInfo.map = map; 
      mapInfo.geocoder = new google.maps.Geocoder(); 
      mapInfo.mapKey = map_container_div; 
      mapHash.push(mapInfo); 
     } 
    } 

    function palceMarker(myAddress, mapId) { 
      mapIndex = getMap(mapId) 
     //alert(myAddress + mapId + map) 
     mapHash[mapIndex].geocoder.geocode({ 
      'address':myAddress 
     }, function (results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
       mapIndex = getMap(mapId) 
       var marker = new google.maps.Marker({ 
        map:mapHash[mapIndex].map, 
        position:results[0].geometry.location, 
        title: results[0].formatted_address 
       }); 
       bound.extend(results[0].geometry.location); 
       mapHash[mapIndex].map.fitBounds(bound); 

       finishedCoding = true; 

      } 
     }); 
    } 

    function getMap(mapKey) { 

     for (var i = 0 ; i < mapHash.length ; i++) { 
      if (mapHash[i].mapKey == mapKey) { 
       return i; 
      } 
     } 
     return false; 
    } 

    function init() { 
     initMap("map1") 
     initMap("map2") 

     palceMarker("1/86-100 Market St, Sydney New South Wales 2000", "map1") 
     palceMarker("120 Market St, Sydney New South Wales 2000", "map2") 
    } 
</script> 
<body onload="init()"> 
    <div id="map1" style="width: 400px; height: 200px;"> 
    </div> 
    <br> 
    <br> 
    <div id="map2" style="width: 400px; height: 200px;"> 
    </div> 
</body>