Question

So I managed to implement the google map with a dragable marker on my website. The only problem I have now is that I don't know how to save the location of where the marker is put the last time. So if a user drags the marker 4 times, I want to save the location (latitude and longitude) of the 4th time only.

This is what I have so far (This is the working code without the code to save the location):

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

        var map = new GMap2(document.getElementById("googleMap"));
        map.addControl(new GLargeMapControl());        
        map.addControl(new GMapTypeControl());


        var centrePoint = new GLatLng('53.34870686020199', '-6.267356872558594');
        map.setCenter(centrePoint, 14); 


        var marker = new GMarker(centrePoint, {draggable: true});
        map.addOverlay(marker);


        GEvent.addListener(marker, "dragend", function() {
            var point = marker.getPoint();
            map.panTo(point);
            document.getElementById("latitude").value = point.lat();
            document.getElementById("longitude").value = point.lng();
        });

        function initialize ()
        {
        Brussels = new google.maps.LatLng (50.833333, 4.333333);

        myOptions = 
        {
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: Brussels,
        streetViewControl: false
        }

        map = new google.maps.Map (document.getElementById ("googleMap"), myOptions);

        marker = new google.maps.Marker ({position: Brussels, title: "Brussel, BE"});
        marker.setMap (map);
        marker.setDraggable (true);

        google.maps.event.addListener (marker, 'dragend', function (event) 
        {

        var point = marker.getPosition();
        map.panTo(point);
        });             
        }

No correct solution

OTHER TIPS

By save do you mean persist to local storage?

You could modify the dragend event listener so that it updates the local storage with the latitude and longitude of the position the marker was dragged to. As this event is triggered whenever the marker is dragged, the local storage will always contain the location of the last drag (i.e. if the user drags the marker 4 times, local storage will hold the position of the fourth drag).

google.maps.event.addListener (marker, 'dragend', function (event) 
{
    var point = marker.getPosition();
    map.panTo(point);

    // save location to local storage
    localStorage['lastLat'] = point.lat();
    localStorage['lastLng'] = point.lng();
}); 

Obviously this would only work in browsers that have support for local storage so it would be wise to check for this before attempting to access the local storage

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top