Несколько карт Google на одной странице - Map API 3

Question

У меня есть сценарий, где я должен разместить несколько карт на одной странице JSP. И, конечно же, я должен разделить их маркеры и полигоны отдельно.

Какая стратегия, я думаю, заключается в создании hashmap карт с идентификатором карты в качестве их ключа.

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

Я помещу объект карты в mapInfo.map, а mapkey будет идентификатором строки.

Но я не могу разместить маркеры на соответствующей карте. Если я уберу логику получения объекта карты из хеша. Работает нормально.

Мне нужен указатель на это. Получение объекта карты из хэша имеет смысл. Я не хочу объект глобальной карты. Я хочу это из массива или хеша. Это то, что я думаю.

Ниже приведена моя инициализация и размещение кода маркера:

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

Ваш код работает правильно, и вы должны иметь возможность хэшировать объекты карты так, как вы планируете. То, что не будет работать правильно, - это то, как вы обрабатываете геокодирование адреса. Поскольку у вас есть только один экземпляр объекта геокодера при каждом запуске запроса на геокодирование, ссылка на карту будет содержать только последнюю карту на странице. Таким образом, у вас есть два варианта - либо создать таймер, который проверяет, завершился ли геокодер (ваша функция 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>