HTML5 Geo Location and draggable marker on Google Map

Question

I am trying to write a geo location webpage which displays the user's approximate location on a map. If they click on the marker they can drag it to their exact location.

I have this code to do the displaying of the map and dragging of the marker:

 function initialize() {
 navigator.geolocation.getCurrentPosition;
 var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
 var myOptions = {
  zoom: 2,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    draggable:true
});
google.maps.event.addListener(
    marker,
    'drag',
    function() {
        document.getElementById('lat').value = marker.position.lat();
        document.getElementById('lng').value = marker.position.lng();
    }
);

}

My question is how do I set the initial latitude and longitude in the above using the html5 geo location:

   navigator.geolocation.getCurrentPosition;

Thanks

Andrew

Abdullahi Ibrahim Abdullahi Ibrahim · Accepted Answer · 2013-09-03T02:48:55

Declare two variables for both the latitude and the Longitude as such:

     position.coords.latitude = 35.8624596;
     position.coords.longitude = -86.4081241;

then another variable for both the lat and long such as:

     var latlon=lat+","+lon;

and then use latlon like this:

     var img_url="http://maps.googleapis.com/maps/api/staticmap?center="+latlon+"&zoom=14&size=400x300&sensor=false";

HTML5 Geo Location and draggable marker on Google Map

1 Answers