移動多個標記谷歌地圖？

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