CODEWITHSUNDEEP
javascripthtmlgoogle-mapsgoogle-maps-api-3geolocation
Zabs
Zabs

Reputation: 14142

Push Lat/Lng values to my Google Maps API & move the marker to that location on event

I have created a script that will allow the user to click a 'Detect my location' button & once clicked using the HTML5 Geolocation will get the lat/lng values & display this on the page. I am using the geolocation.js from this website - http://better-geolocation-api.googlecode.com

I have a Google Map that has been setup - I want to alter this so when the 'Detect my location' button is clicked it will automatically send the lat/lng values to this & move the marker accordingly.

<!DOCTYPE html>
<html>
<head>
    <title>Google Maps Drag &amp; Drop to Lat/Lng</title>
    <style type="text/css">
        #map { height: 500px; border: 1px solid #000; }
        #geo { height: 200px; overflow: auto; }
    </style>
</head>
<body>
<button id="getPositionButton">Get</button>
<div id="geo"></div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://code.google.com/apis/gears/gears_init.js"></script>
<script src="http://better-geolocation-api.googlecode.com/files/geolocation.js"></script>
<script src="jquery.geolocation.js"></script>

<script>
function success(position) {
    $('#geo').html(position.coords.latitude + ', ' + position.coords.longitude + '<br />' + $('#geo').html());
}

$(function() {

    function alertMyPosition(position) {
        alert("Your position is " + position.coords.latitude + ", " + position.coords.longitude);
        $('#geo').html(position.timestamp + ": " + position.coords.latitude + ", " + position.coords.longitude + "<br />" + $('#geo').html());
    }

    function noLocation(error) {
        $('#geo').text("No location info available. Error code: " + error.code);
    }

    $('#getPositionButton').bind('click', function() {
        $.geolocation.get({win: alertMyPosition, fail: noLocation});
    }); 

});
</script>

<div id="map"></div>
<p>Initial Lat/Lng : 52.5879, -1.9824</p>
<script type="text/javascript">
window.onload = function() {
    var latlng = new google.maps.LatLng(52.5879, -1.9824);
    var map = new google.maps.Map(document.getElementById('map'), {
        center: latlng,
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: 'Set lat/lon values for this property',
        draggable: true
    });
    google.maps.event.addListener(marker, 'dragend', function(a) {
        console.log(a);
        var div = document.createElement('div');
        div.innerHTML = a.latLng.lat().toFixed(4) + ', ' + a.latLng.lng().toFixed(4);
        document.getElementsByTagName('body')[0].appendChild(div);
    });
};  
</script>

Upvotes: 2

Views: 1277

Answers (1)

duncan
duncan

Reputation: 31912

Firstly, make your marker variable global, so it's accessible outside of the onload anonymous callback function.

Then just do:

function alertMyPosition(position) {
    $('#geo').html(position.timestamp + ": " + position.coords.latitude + ", " + position.coords.longitude + "<br />" + $('#geo').html());

    marker.setPosition({lat: position.coords.latitude, lng: position.coords.longitude});
}

Upvotes: 2

Related Questions