Multiple Google maps on one page - Map API 3

问题

I have a scenerio where I have to place multiple maps on one JSP page. And offcourse I have to handel their markers and polygons seprately.

What strategy I am thinking is to make a hashmap of maps with a map id as their key.

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

I will put map object in mapInfo.map and mapkey will be a string ID.

But I am unable to place markers on the respective map. If I remove the logic of getting map object from hash. It works fine.

I need a pointer on it. Getting a map object from hash is making sense. I dont want a global map object. I want it from array or hash. This is what I am thinking.

Following is my initialization and placing marker code:

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;
  }

回答1:

You code works correctly, and you should be able to hash map objects in the way you are planning to do. What is not going to work correctly is the way you are handling geocoding of the address. As you only have one instance of geocoder object everytime you launch a gecoding request the map reference will only contain the last map on page. So you have two choices - either build a timer which checks if geocoder (your placeMarker function) finished before you make another geocoding request. Or you keep an array of geocoder objects (like your maps)..

here is an example

<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>

来源：https://stackoverflow.com/questions/6525106/multiple-google-maps-on-one-page-map-api-3