How to move a marker in Google Maps API
moveBus()
is getting called before initialize()
. Try putting that line at the end of your initialize()
function. Also Lat/Lon 0,0 is off the map (it's coordinates, not pixels), so you can't see it when it moves. Try 54,54. If you want the center of the map to move to the new location, use panTo()
.
Demo: http://jsfiddle.net/ThinkingStiff/Rsp22/
HTML:
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map-canvas"></div>
CSS:
#map-canvas
{
height: 400px;
width: 500px;
}
Script:
function initialize() {
var myLatLng = new google.maps.LatLng( 50, 50 ),
myOptions = {
zoom: 4,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map( document.getElementById( 'map-canvas' ), myOptions ),
marker = new google.maps.Marker( {position: myLatLng, map: map} );
marker.setMap( map );
moveBus( map, marker );
}
function moveBus( map, marker ) {
marker.setPosition( new google.maps.LatLng( 0, 0 ) );
map.panTo( new google.maps.LatLng( 0, 0 ) );
};
initialize();
Just try to create the marker and set the draggable property to true
.
The code will be something as follows:
Marker = new google.maps.Marker({
position: latlon,
map: map,
draggable: true,
title: "Drag me!"
});
I hope this helps!