How to implement a map that shows real-time location - with displacement?

Asked

Viewed 1,045 times

1

That is the scenario:

For example, if I wanted to show all the homes of users of a city (those who are registered in the system) it would be enough to make a request in the database before the page is loaded, retrieve the geographical coordinates that were previously provided by users during the signup process, and send to javascript when using the API to instantiate the map. This is how I currently do with my projects.

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

maps realtime-database

  • you need to update the user’s position (assuming you want to track the phone via gps, for example) and redraw the points on the map. I state this procedure because you do not need to control one to which marker moved every x seconds (time the map is updated.

  • exact, it would be via cell phone gps to send the coordinates of the point. Preferably would be every second. And I’d like to see on the map all the registered sites moving at the same time. [It’s for a mass displacement study, so you need to visualize all users in real time. But how would it be implemented? Update the map every second or there is some function for it?

  • so I did a search if there’s any auto-update mechanism but I couldn’t find it.. I’ve implemented it and it was on hand anyway.. window.setTimeout("AtualizarTela()", 30000); where my map update method was called every 30 seconds (this method will at the base take the updated position data and reload the map)

  • Hi @rLinhares I’ve worked with the google map API. The most dynamic I could do was to create a php page that takes the information in a database and dynamically creates the javascript code (there are other ways). That way when the map is created on the screen it will already contain the latest information of my points of interest. So this page was reloaded every minute. That is, every minute the map was recreated. I was working with information (which could change) but from a fixed establishment. The coordinates of my point of interest do not change. Now it’s the other way around

  • Anyway, if I wanted to see in real time the displacement of a person who owns a mobile phone sending the geographical coordinates to the system every second, your proposal would be to refresh the page every second?

  • the idea is the same that you worked, reload the points on the map every x seconds. The difference is that you need to update these points according to the current position of the guy who is moving.

  • ok, so the idea would be to delete all the dots and create again every second and on recreating the map again

  • this.. so you don’t "spend" the map requests and you don’t waste time recreating the map

Show 3 more comments

1 answer

1

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

An offset will be a sequence of points (positions) that will appear on the map in a successive way - one after the other.

      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);

Browser other questions tagged maps realtime-database

You are not signed in. Login or sign up in order to post.