移动多个标记谷歌地图？

Question

我想在谷歌地图移动多个标记， 我成功地找到，并按照这个例子http://jsfiddle.net/ThinkingStiff/Rsp22/但例如只显示一个标记可以移动... 我试图修改代码，但没有成功...... 这是我的代码。 ..

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

任何人都可以看到为什么这不是做我想要的？

谢谢

Answer 1

请尝试以下，这对我完全适用。这个例子有四张地图，如果你有更多，你可能想要在for循环中填充数组。

注意所有8点是如何在同一个地方装（每两个地图），然后A到d（每个地图一个）移动上/下/左/右

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();