title: Keep marker/pin in the middle of the map while dragging
body: <p>I want the marker/pin to scroll around and be in the center of the map while the user is dragging around the map. I have a simple jsfiddle (<a href="http://jsfiddle.net/upsidown/5xd1Lbpc/6/" rel="nofollow">http://jsfiddle.net/upsidown/5xd1Lbpc/6/</a>) where the pin will drop to the center of the map when the user stops dragging, but I want the pin to move with the dragging.</p>
  
  <p>Google Maps JS</p>
  
  <pre><code>var center = new google.maps.LatLng(-33.013803, -71.551498);
  
  var map = new google.maps.Map(document.getElementById('mapBox'), {
      zoom: 18,
      center: center,
      mapTypeId: google.maps.MapTypeId.HYBRID
  });
  
  var myMarker = new google.maps.Marker({
      position: center,
      draggable: true,
      map: map
  });
  
  google.maps.event.addListener(myMarker, 'dragend', function () {
      map.setCenter(this.getPosition()); // Set map center to marker position
      updatePosition(this.getPosition().lat(), this.getPosition().lng()); // update position display
  });
  
  google.maps.event.addListener(map, 'dragend', function () {
      myMarker.setPosition(this.getCenter()); // set marker position to map center
      updatePosition(this.getCenter().lat(), this.getCenter().lng()); // update position display
  });
  
  function updatePosition(lat, lng) {
      document.getElementById('dragStatus').innerHTML = '&lt;p&gt; Current Lat: ' + lat.toFixed(4) + ' Current Lng: ' + lng.toFixed(4) + '&lt;/p&gt;';
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id='mapBox'&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Any ideas or thoughts on how to do this?</p>