How can I use GMaps API to display a draggable pin that defaults to the user's HTML5 geolocation?

Question

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 HTML5 geolocation API, but the code I'm using won't output anything at all. It's probably something really simple (I'm new to web dev, be kind!), but I can't figure out for the life of me what it is.

This is the code I'm using:

<input type="text" name="ilat" style="display: none;">
<input type="text" name="ilong" style="display: none;">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></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>
<script type="text/javascript">
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
            var locmap = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        } else {
            var locmap = new google.maps.LatLng(51.50532252465797, -0.14202490290529113);
        }
    }

    function init_map() {
        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.addDomListener(window, 'load', init_map);
    google.maps.event.addListener(marker, 'dragend', function(event) {
        document.getElementById("ilat").value = this.getPosition().lat();
        document.getElementById("ilong").value = this.getPosition().lng();
    });
</script>

Would someone enlighten me as to what I'm doing wrong?

Thanks!

Answer 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>