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

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

i have come across quite few code , tutorials , questions on sto moving or updating markers want via ajax.

i don't want via ajax.

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

so move marker every x seconds, need inside localstorage opposed call ajax etc etc...

the local storage looks this:

var lat = localstorage.getitem("mylat"); var lng = localstorage.getitem("mylng"); 

and values of them simple string so:

51.54647477 0.123383777 

so, if change of values locally (no ajax), need teh marker move or update location speak.

first, possible?

maybe, using setinterval() ?!

if so, please advise on or point me in right direction?

any appreciated.

edit:

i think i'm getting somewhere. issue marker gets removed:

here fiddle

if use lat/long values directly in code marker doesn't disappear in moves when use input value or localstorage valu, 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 moves marker once , wont move again if edit 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;        }); 

one option use setinterval periodically read localstorage , set marker position (creating marker if 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>