Jackson Jackson - 1 year ago 62
Javascript Question

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

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

of the marker gets stored in the

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:


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?


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

Any help would be greatly appreciated.


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.


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:


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 Source

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"));
    lat: lat,
    lng: lng
  if (!marker || !marker.setPosition) {
    marker = new google.maps.Marker({
      position: {
        lat: lat,
        lng: lng
      map: map
  } else {
      lat: lat,
      lng: lng
}, 5000);
google.maps.event.addDomListener(window, "load", initialize);
#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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download