Google Maps, Move Marker Move
only allow one marker at a time.
HTML
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<div id="results"></div>
<div id="map"></div>
<input id="start" type="button" value="Start">
CSS
#map {
width: 450px;
height: 400px;
}
#start{
width:150px;
height:45px;
}
JavaScript
var map;
var marker;
var positions = [];
var positionsIdx = 1;
function placeMarker(location) {
if (marker) {
//if marker already was created change positon
marker.setPosition(location);
} else {
console.log('positions');
//create a marker
marker = new google.maps.Marker({
position: location,
map: map,
draggable: true
});
google.maps.event.addListener(marker, "position_changed", function () {
setTimeout(function () {
if (positions.length > 0 && positionsIdx <= positions.length - 1) {
placeMarker(positions[positionsIdx++]);
map.setCenter(positions[positionsIdx++]);
}
}, 50);
});
}
}
function initialize() {
var centerPosition = new google.maps.LatLng(38.713107, -90.42984);
var options = {
zoom: 13,
center: centerPosition,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($('#map')[0], options);
//generate an array of positions.
for (i = 0; i < 100; i++) {
var lat = 38.713107 + (i / 1000);
var lng = -90.42984 + (i / 1000);
var latLng = new google.maps.LatLng(lat, lng);
positions.push(latLng);
}
//create marker
placeMarker(positions[0]);
$('#start').on("click", function(){
positionIdx = 1;
placeMarker(positions[1]);
});
}
google.maps.event.addDomListener(window, 'load', initialize);