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