0

below is my code, where I've created a geolocation marker and a marker which the user can drag around the map. I'm wondering what I need to do in order to keep the location of the dragged marker, if the user refreshes. Below is my code:

function initialize() {

    var locations = [
        ['Your Hostel Is Here', 54.911615,-1.377025,],

        ];

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(54.911615,-1.377025),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            draggable: true
        });

          localStorage.setItem('marker', marker);
      var retrievedmarker = localStorage.getItem('marker');

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }

    // Check if user support geo-location
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            var geolocpoint = new google.maps.LatLng(latitude, longitude);

            var mapOptions = {
                zoom: 8,
                center: geolocpoint,
                mapTypeId: google.maps.MapTypeId.HYBRID
            }
            // Place a marker
            var geolocation = new google.maps.Marker({
                position: geolocpoint,
                map: map,
                title: 'Your geolocation',
                icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
            });
        });
    }
}
google.maps.event.addDomListener(window, 'load', initialize);
Anto Jurković
  • 11,188
  • 2
  • 29
  • 42
  • using just `localStorage.setItem()/getItem()` won't work because that works for string key/value pairs. See for some hints [Storing Objects in HTML5 localStorage](http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage). And your `marker` object is not just string. And I do not see if your code react to any marker changes. – Anto Jurković Nov 28 '13 at 22:36

1 Answers1

0

You need to store the lat long value of a marker object in string, rather than the object. Furthermore, your need to listen to the marker mouseup event to store the marker value for later display.

Add this event:

//Record the new marker position
google.maps.event.addListener(marker, 'mouseup', function() {
        localStorage.setItem('marker', marker.position.lat() + "," + marker.position.lng());
        var retrievedmarker = localStorage.getItem('marker');
      });

Edit the following code section:

//Get the last recorded marker position for display
var retrievedmarker = localStorage.getItem('marker');
mylatlng = retrievedmarker.split(",");

for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        //position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        position: new google.maps.LatLng(mylatlng[0], mylatlng[1]),
        map: map,
        draggable: true
    });

Note: I didn't check for the localStorage key existence, please make sure you check for it before the value retrieval.

Chris Lim
  • 424
  • 4
  • 9
  • What do you mean by local storage key? –  Dec 02 '13 at 16:05
  • For the first run or other reasons, the localStorage.setItem will not being called yet and therefore the localStorage.getItem will fails you on the 'marker' key retrieval. In this case, you should set a default google map marker for your new position drag. – Chris Lim Dec 05 '13 at 02:30