How to implement a map showing location in real time - with offset?

Question

How to implement a map showing location in real time - with offset?

Navigation

#1 by (0 votes)

0

Here's the scenario:

For example, if I wanted to show all the homes of the users of a city (those that are registered in the system) it would only be necessary to make a request in the database before the page is loaded, to recover the geographic coordinates that were previously provided by the users during the sign-up process, and submit to javascript when it's using API to instantiate the map. This is how I do it today with my projects.

My question would be how to show in real time the displacement of any user on the same map previously created? How do you implement this functionality?

realtime-database mapas

asked by anonymous 14.06.2017 / 14:46

1 answer

Display Java Database Values Problems with foreach in php

score 0 · Answer 1

I found the solution for this application. A point (or any object - a marker) that moves in googleMaps using the API.

A displacement will be a sequence of points (positions) that will appear on the map successively - one after another.

      var markers = [];  
      var mapObject;
      var z=0;
      var myLatLngA = [];   

      function setMapOnAll(map) {
        for (var i = 0; i < markers.length; i++) {
          markers[i].setMap(map);
        }        
      }

      setInterval(function() {            
        setMapOnAll(null);//Limpa qualquer ponto que estejam no mapa
        var marker = new google.maps.Marker({//Cria o objeto marker
          position: myLatLngA[z],//Usando a próxima posição de uma array de
                                 //posições. Essa array pode ser criada a
                                 //partir de dados provenientes de um um
                                 //banco de dados como firebase por exemplo
          map: mapObject         
        });
        markers.push(marker);    //guarda o objeto marker numa array
        marker.setMap(mapObject);//Plota o marcador no mapa
        z++; 
      }, 1000);