Using HTML5 Geo Location to move the marker and update the position

I have implemented the following HTML5 geo location script.

Can someone please explain how I can generate the map so that the marker can be dragged to a new position and the latitude/longitude position updated?

I have implemented a website using this script but the results are not always accurate. Sometimes I assume the GPS signal is weak so it then returns the location of the nearest phone mast I guess. What I want is for the user to be able to update their position to make it more accurate so that I can then submit their lat/long position. Perhaps what is needed here is the ability to add another marker.
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Robert SchuttSoftware EngineerCommented:
You can add a property "draggable: true" to the marker options. Then you can add an event listener and handler function.

To store this you could use an AJAX call or, if this is part of a form, maybe the easiest would be to store these in hidden fields.

To test it quickly, paste the following code over the existing code in the tryit editor:
<!DOCTYPE html>
<body onload="getLocation()">

<div id="mapholder"></div>
<br><span id="myLabel">N/A</span>

<script src=""></script>

var x = document.getElementById("demo");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";

function showPosition(position) {
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    var myLabel = document.getElementById('myLabel');
    myLabel.textContent = 'Geolocation says: (' + lat + ', ' + lon + ')';
    latlon = new google.maps.LatLng(lat, lon)
    mapholder = document.getElementById('mapholder') = '250px'; = '500px';

    var myOptions = {
    var map = new google.maps.Map(document.getElementById("mapholder"), myOptions);
    var marker = new google.maps.Marker({position:latlon,map:map,title:"You are here!",draggable:true});
    google.maps.event.addListener(marker, 'dragend', setCoordinates);

function setCoordinates(e) {
    var myLabel = document.getElementById('myLabel');
    myLabel.textContent = 'changed to: (' + + ', ' + e.latLng.lng() + ')';

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."


Open in new window

This information is available on:

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mike99cAuthor Commented:
This is perfect and exactly what I'm lookng for. Thanks you very much.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.