перемещать карты с несколькими маркерами google?

Question

Я хочу переместить несколько маркеров в google maps, Я успешно нашел и следую этому примеру 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 точек загружаются (две на карте) в том же месте, а затем от А до 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();