Stackoverflow - How to move marker in Google Maps API

http://stackoverflow.com/q/8024784/918414

by Joe Cisneros

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map-canvas"></div>





































































































































































































<script>
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-23915674-6']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
    
var headerUri = 'http://stackoverflow.com/q/8024784/918414',
    headerCaption = 'How to move marker in Google Maps API';
document.body.insertAdjacentHTML( 
    'afterBegin',
      '<a href="' + headerUri + '" '
    + 'target="_top" '
    + 'onmouseover="this.style.opacity=\'.95\'" '
    + 'onmouseout="this.style.opacity=\'1\'" '
    + 'style="'
        + 'background-color: black;'
        + 'background-image: linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
        + 'background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
        + 'background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
        + 'background-image: -o-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
        + 'background-image: -ms-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
        + 'border: 1px solid black;'
        + 'border-radius: 2px;'
        + 'color: white;'
        + 'display: block;'
        + 'font: normal 15px/26px Helvetica, Verdana, Tahoma;'
        + 'height: 26px;'
        + 'margin: -8px 0 8px -8px;'
        + 'opacity: 1;'
        + 'overflow: hidden;'
        +...

CSS

#map-canvas 
{ 
height: 400px; 
width: 500px;
}

JavaScript

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 );
    moveMarker( map, marker );
    
}

function moveMarker( map, marker ) {
    
    //delayed so you can see it move
    setTimeout( function(){ 
    
        marker.setPosition( new google.maps.LatLng( 0, 0 ) );
        map.panTo( new google.maps.LatLng( 0, 0 ) );
        
    }, 1500 );

};

initialize();