title: Google Map get current location that can be changed by dragging the pin
body: <p>This is my first post so i'm sorry if it has been asked before.</p>
  
  <p>I have a form users fill out on mobile devices which captures there longitude and latitude using JavaScript geolocation. this isn't always the most accurate so I am trying to combine geolocation and google map draggable pin.</p>
  
  <p>So the user opens the page, geolocation enters the current lon and lat in the script below, if its wrong they can then drag the pin to the right location which updates the text fields.</p>
  
  <p>I have tried every thing and have had mixed results...if someone could help me out that would be great.</p>
  
  <p>I hope this makes sense...if not im happy to explain more</p>
  
  <p>The script below enables you to drag the pin and updates the two text field with the lon and lat.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset=utf-8 /&gt;
  &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    
    &lt;input type="text" id="latitude" placeholder="latitude"&gt;
    &lt;input type="text" id="longitude" placeholder="longitude"&gt;
    &lt;div id="map" style="width:500px; height:500px"&gt;&lt;/div&gt;
    
    &lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"&gt;&lt;/script&gt;
    &lt;script&gt;
   function initialize() {
    var $latitude = document.getElementById('latitude');
    var $longitude = document.getElementById('longitude');
    var latitude = 50.715591133433854
    var longitude = -3.53485107421875;
    var zoom = 7;
    
    var LatLng = new google.maps.LatLng(latitude, longitude);
    
    var mapOptions = {
     zoom: zoom,
     center: LatLng,
     panControl: false,
     zoomControl: false,
     scaleControl: true,
     mapTypeId: google.maps.MapTypeId.ROADMAP
    } 
    
    var map = new google.maps.Map(document.getElementById('map'),mapOptions);
        
    
    var marker = new google.maps.Marker({
     position: LatLng,
     map: map,
     title: 'Drag Me!',
     draggable: true
    });
    
    google.maps.event.addListener(marker, 'dragend', function(marker){
     var latLng = marker.latLng;
     $latitude.value = latLng.lat();
     $longitude.value = latLng.lng();
    });
    
    
   }
   initialize();
   &lt;/script&gt;
    
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>