javascript - Google maps save marker location? - Stack Overflow

admin管理员组

文章数量:1427361

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=""></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);
        });             
        }

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./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);
        });             
        }

• javascript
• google-maps
• location
• save
• latitude-longitude

Share Improve this question Follow asked Feb 21, 2014 at 10:25 user3336707user3336707 2511 silver badge22 bronze badges 4

• 1 It seems that you are mixing google maps api v2 and v3. – Anto Jurković Commented Feb 21, 2014 at 10:33
• Am I? it is pletely working though. I just don't know how to save the location.. – user3336707 Commented Feb 21, 2014 at 10:37
• You want the user not to be able to drag anymore after 4th drag? – alpakyol Commented Feb 21, 2014 at 11:34
• No I want him to be able to drag as much as he wants. But I want to save the last drag only. So it gets saved in a database for example. I don't want to save all the locations the marker was put on. Only the last one. – user3336707 Commented Feb 21, 2014 at 12:40

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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

本文标签： javascriptGoogle maps save marker locationStack Overflow