Menu
I'm using the Google Maps API V3 and I'm trying to make a marker move across the screen. Here's what I have:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"> </script> <script type="text/javascript"> function initialize() { var myLatLng = new google.maps.LatLng(50,50); var myOptions = { zoom: 4, center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); image = 'bus.gif'; marker = new google.maps.Marker({position: myLatLng, map: map, icon: image}); marker.setMap(map); } function moveBus() { // Move Bus } </script> </head> <body onload="initialize()"> <script type="text/javascript"> moveBus(); </script> <div id="map_canvas" style="height: 500px; width: 500px;"></div> </body> </html> Now what I've tried is replacing // Move Bus with
marker.setPosition(new google.maps.LatLng(0,0)); But that didn't do anything. That's the command I saw on the API reference. I'm also relatively new to Javascript, so it might be a JS error on my part.
793
The transition() and moveMarker() are used to move marker smoothly on click on the Google map.
The most notable point here is the draggable(true) on the MarkerOptions() and the initialization of the startMarker to the map. Setting draggable to true makes the marker draggable and vice versa is true. Now with this, after the marker is shown, you can long-press the marker then drag it to your preferred location.
There is a method makeMarker() you just need to call from onMapReady() method . There is two method rotateMarker() and moveVechile() to rotate and move marker. Hope this will help you.
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!
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
