title: Push Lat/Lng values to my Google Maps API & move the marker to that location on event
body: <p>I have created a script that will allow the user to click a 'Detect my location' button &amp; once clicked using the HTML5 Geolocation will get the lat/lng values &amp; display this on the page. I am using the geolocation.js from this website - <a href="http://better-geolocation-api.googlecode.com" rel="nofollow">http://better-geolocation-api.googlecode.com</a></p>
  
  <p>I have a Google Map that has been setup - I want to alter this so when the 'Detect my location' button is clicked it will automatically send the lat/lng values to this &amp; move the marker accordingly.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Google Maps Drag &amp;amp; Drop to Lat/Lng&lt;/title&gt;
      &lt;style type="text/css"&gt;
          #map { height: 500px; border: 1px solid #000; }
          #geo { height: 200px; overflow: auto; }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;button id="getPositionButton"&gt;Get&lt;/button&gt;
  &lt;div id="geo"&gt;&lt;/div&gt;
  &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.google.com/apis/gears/gears_init.js"&gt;&lt;/script&gt;
  &lt;script src="http://better-geolocation-api.googlecode.com/files/geolocation.js"&gt;&lt;/script&gt;
  &lt;script src="jquery.geolocation.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  function success(position) {
      $('#geo').html(position.coords.latitude + ', ' + position.coords.longitude + '&lt;br /&gt;' + $('#geo').html());
  }
  
  $(function() {
  
      function alertMyPosition(position) {
          alert("Your position is " + position.coords.latitude + ", " + position.coords.longitude);
          $('#geo').html(position.timestamp + ": " + position.coords.latitude + ", " + position.coords.longitude + "&lt;br /&gt;" + $('#geo').html());
      }
  
      function noLocation(error) {
          $('#geo').text("No location info available. Error code: " + error.code);
      }
  
      $('#getPositionButton').bind('click', function() {
          $.geolocation.get({win: alertMyPosition, fail: noLocation});
      }); 
  
  });
  &lt;/script&gt;
  
  &lt;div id="map"&gt;&lt;/div&gt;
  &lt;p&gt;Initial Lat/Lng : 52.5879, -1.9824&lt;/p&gt;
  &lt;script type="text/javascript"&gt;
  window.onload = function() {
      var latlng = new google.maps.LatLng(52.5879, -1.9824);
      var map = new google.maps.Map(document.getElementById('map'), {
          center: latlng,
          zoom: 11,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      });
      var marker = new google.maps.Marker({
          position: latlng,
          map: map,
          title: 'Set lat/lon values for this property',
          draggable: true
      });
      google.maps.event.addListener(marker, 'dragend', function(a) {
          console.log(a);
          var div = document.createElement('div');
          div.innerHTML = a.latLng.lat().toFixed(4) + ', ' + a.latLng.lng().toFixed(4);
          document.getElementsByTagName('body')[0].appendChild(div);
      });
  };  
  &lt;/script&gt;
  </code></pre>