Javascript: Google maps set marker latitude longitude every x seconds?

Question

I'm trying to learn how to move a marker on the google map every x seconds (without refreshing the map or page ofcourse).

I have come across quite a few code and tutorials and questions on STO about moving or updating markers but they all want to do it via AJAX.

I don't want to do it via AJAX.

Basically, the lat/long of the marker gets stored in the localstorage();

So to move the marker every x seconds, I just need to look inside the localstorage as opposed to call AJAX etc etc...

The local storage looks something like this:

var lat = localStorage.getItem("mylat");
var lng = localStorage.getItem("mylng");

and the values of them are just simple string like so:

51.54647477
0.123383777

So, if I change any of those values locally (NO AJAX), I need teh marker to move or update its location so to speak.

First, is this even possible?

MAYBE, USING SETINTERVAL() ?!

If so, could someone please advise on this or point me in the right direction?

Any help would be greatly appreciated.

EDIT:

I think I'm getting somewhere. the issue is that the marker gets removed:

Here is a FIDDLE

If I use the lat/long values directly in the code the marker doesn't disappear in it moves but when I use the input value or localstorage valu, the marker disappears.

Works:

var NewLatLng = new google.maps.LatLng(20.371237, 72.90634);

Doesn't work:

var NewLatLng = new google.maps.LatLng(input);

Another EDIT:

This works now but it only moves the marker once and it wont move it again if I edit the inputs values:

http://jsfiddle.net/wduno9su/5/

This works fine now:

$(document).ready(function () {





    var map;


         function initialize()
         {


           var latlng = new google.maps.LatLng(21.16536,72.79387);



           var myOptions = {
               zoom: 5,
               center: latlng,
               mapTypeId: google.maps.MapTypeId.ROADMAP
           };


           map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
           var marker = new google.maps.Marker
           (
               {
                   position: new google.maps.LatLng(21.1673643, 72.7851802),
                   map: map,
                   title: 'Click me'
               }

           );




           var infowindow = new google.maps.InfoWindow({
               content: 'Location info:<br/>SVNIT Post Office, Dumas Rd, Surat<br/>LatLng:<br/>21.1673643, 72.7851802'
           });
           google.maps.event.addListener(marker, 'click', function ()
           {
              infowindow.open(map, marker);
              setTimeout(function(){infowindow.close();}, '5000');
           });

       //$('#clickme').on('click', function(){
       setInterval(function() {
           var input = $('#input').val();
           var input2 = $('#input2').val();


            var NewLatLng = new google.maps.LatLng(input, input2);
            //setInterval(function() { marker.setPosition(NewLatLng);}, 2000);
            marker.setPosition( NewLatLng );
    });   


       }





       window.onload = initialize;



    });

Answer 1

One option would be to use setInterval to periodically read the localStorage and set the marker position (creating the marker if it doesn't exist).

proof of concept fiddle

code snippet:

 var map; var marker; function initialize() { map = new google.maps.Map( document.getElementById("map_canvas"), { center: new google.maps.LatLng(37.4419, -122.1419), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); } function setLocalStorage() { var lat = document.getElementById('lat').value; var lng = document.getElementById('lng').value; localStorage.setItem('mylat', lat); localStorage.setItem('mylng', lng); } setInterval(function() { var lat = parseFloat(localStorage.getItem("mylat")); var lng = parseFloat(localStorage.getItem("mylng")); map.panTo({ lat: lat, lng: lng }); if (!marker || !marker.setPosition) { marker = new google.maps.Marker({ position: { lat: lat, lng: lng }, map: map }); } else { marker.setPosition({ lat: lat, lng: lng }); } }, 5000); google.maps.event.addDomListener(window, "load", initialize); 

 html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <script src="https://maps.googleapis.com/maps/api/js"></script> <input id="lat" value="42" /> <input id="lng" value="-72" /> <input type="button" onclick="setLocalStorage();" value="click" /> <div id="map_canvas"></div>