How Can I Use GMaps API To Display A Draggable Pin That Defaults To The User's HTML5 Geolocation?

Title says it all, really. I'm trying to use the Google Maps JavaScript API to create a map with a draggable pin that defaults to the user's current geolocation as defined by the H

Solution 1:

Your code is a bit of a mess, I'm afraid! There are a number of syntax errors in it, so you should always check the JavaScript Console (Hamburger->More Tools->JavaScript Console on Chrome) for help in these situations.

After the syntax errors, the main problem is that your variable scope is all wrong. Please consult this tidied-up version, and see the sample Google code here.

var locmap = new google.maps.LatLng(51.50532252465797, -0.14202490290529113);

function getLocation() {

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(locmap) {
        locmap = new google.maps.LatLng(position.coords.latitude,
          position.coords.longitude);
      },
      function() {});

  }
}

function init_map() {
  getLocation();
  var myOptions = {
    zoom: 16,
    center: locmap,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
  marker = new google.maps.Marker({
    draggable: true,
    map: map,
    position: locmap
  });
  infowindow = new google.maps.InfoWindow({
    content: "<b>Last known location</b> "
  });
  google.maps.event.addListener(marker, "click", function() {
    infowindow.open(map, marker);
  });
  infowindow.open(map, marker);
  google.maps.event.addListener(marker, 'dragend', function(event) {
    document.getElementById("ilat").value = this.getPosition().lat();
    document.getElementById("ilong").value = this.getPosition().lng();
  });
}
google.maps.event.addDomListener(window, 'load', init_map);

<input type="text" name="ilat" style="display: none;">
<input type="text" name="ilong" style="display: none;">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div style="overflow:hidden;height:500px;width:600px;">
  <div id="gmap_canvas" style="height:500px;width:600px;"></div>
  <style>
    #gmap_canvas img {
      max-width: none!important;
      background: none!important
    }
  </style><a class="google-map-code" id="get-map-data" />
</div>