移动多个标记谷歌地图？

Question

i want move multiple marker in google maps, i successfully found and follow this example http://jsfiddle.net/ThinkingStiff/Rsp22/ but the example show only one marker can move... i attempt to modify the code but not success... this my code...

function initialize() { 
   map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    //makeRequest is function to load data coordinat from db..... success!!
       makeRequest('get_locations.php', function(data) {

            var data = JSON.parse(data.responseText);

         for (var i=0;i<data.lenght;i++){
           //document.getElementById("koordinatnya").innerHTML = data[0]['latitude']+","+data[0]['longitude'];
           var myLatlng = new google.maps.LatLng(data[i]['latitude'], data[i]['longitude']);
           var marker = new google.maps.Marker({
                position: myLatlng,
                title:"Dari db :" + data[i]['tempat']
            });

            marker.setMap(map);
            moveMarker( map, marker, data[i]['latitude'], data[i]['longitude']);

         }

        });
  }

  function moveMarker( map, marker, lat, lng ) {    
        //delayed so you can see it move
            marker.setPosition( new google.maps.LatLng(lat,lng));
            map.panTo( new google.maps.LatLng(lat,lng));
  }

Can anyone see why this is not doing what i want?

thanks

Answer 1

Try the following, which works perfectly for me. This example has four maps, if you have more you might want to populate the arrays in a for loop.

Note how all 8 points are loaded (two per map) in the same place, and then A to D (one per map) are moved up / down /left / right

HTML:

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<table>
    <tr>
        <td><div id="map0" class="map"></div></td>
        <td><div id="map1" class="map"></div></td>
    </tr>
    <tr>
        <td><div id="map2" class="map"></div></td>
        <td><div id="map3" class="map"></div></td>
    </tr>
</table>

CSS:

.map
{ 
height: 300px; 
width: 400px;
}

JAVASCRIPT:

var vans = { "H": 0, "A": 1, "B": 2, "C": 3, "D": 4, "E": 5, "F": 6, "G": 7, "H": 8  };
var Maps = new Array(); 
var markers = [];

function initialize() {
    var myLatLng = new google.maps.LatLng(53, -1);
        myOptions = {
            zoom: 13,
            center: myLatLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            };
        Maps[0] = new google.maps.Map(document.getElementById("map0"), myOptions);
        Maps[1] = new google.maps.Map(document.getElementById("map1"), myOptions);
        Maps[2] = new google.maps.Map(document.getElementById("map2"), myOptions);
        Maps[3] = new google.maps.Map(document.getElementById("map3"), myOptions);
        addPoint(Maps[0], 53, -1, "A");
        addPoint(Maps[1], 53, -1, "B");
        addPoint(Maps[2], 53, -1, "C");
        addPoint(Maps[3], 53, -1, "D");
        addPoint(Maps[0], 53, -1, "E");
        addPoint(Maps[1], 53, -1, "F");
        addPoint(Maps[2], 53, -1, "G");
        addPoint(Maps[3], 53, -1, "H");    
        movePoint(53.5, -2, "A");
        movePoint(53, 0, "B");
        movePoint(53.5, -1, "C");
        movePoint(53, -2, "D");
}
        function movePoint(lat, lng, name) {
            var thisLatlng = new google.maps.LatLng(lat, lng);
            markers[vans[name]].setPosition(thisLatlng);
        }

        function addPoint(thismap, lat, lng, name) {            
            var thisLatlng = new google.maps.LatLng(lat, lng);
            var marker = new google.maps.Marker({
                position: thisLatlng
            });
            marker.setMap(thismap);
            markers[vans[name]] = marker;
        }
initialize();