metalx1000

Basic Google Map Move Marker

Jun 18th, 2013
592
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 1.46 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  5.     <meta charset="utf-8">
  6.     <title>Simple icons</title>
  7.     <link href="https://developers.google.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
  8.     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
  9.     <script>
  10.  
  11. x=26.0906973;
  12. y=-81.732371;
  13.  
  14. function initialize() {
  15.   var mapOptions = {
  16.     zoom: 15,
  17.     center: new google.maps.LatLng(x,y),
  18.     mapTypeId: google.maps.MapTypeId.ROADMAP
  19.   }
  20.   map = new google.maps.Map(document.getElementById('map-canvas'),
  21.                                 mapOptions);
  22.  
  23.   var image = 'http://www.apponic.com/data/softimg/mac/audio/audio-editors/tux-guitar-79268-icon.jpeg';
  24.   var myLatLng = new google.maps.LatLng(x,y);
  25.         marker = new google.maps.Marker({
  26.       position: myLatLng,
  27.       map: map,
  28.       icon: image
  29.   });
  30.  
  31.         moveMarker( map, marker );
  32. }
  33.  
  34. function moveMarker( map, marker ) {
  35.    
  36.     //delayed so you can see it move
  37.     setInterval( function(){
  38.         x+=0.0001010;
  39.         y-=0.0001010;
  40.         marker.setPosition( new google.maps.LatLng( x, y ) );
  41.         map.panTo( new google.maps.LatLng( x, y ) );
  42.        
  43.     }, 500 );
  44.  
  45. };
  46.  
  47. google.maps.event.addDomListener(window, 'load', initialize);
  48.  
  49.     </script>
  50.   </head>
  51.   <body>
  52.     <div id="map-canvas"></div>
  53.         <button>Click me</button>
  54.   </body>
  55. </html>
Add Comment
Please, Sign In to add comment