All geek questions in one place

Update google map javascript ajax

I am making two html5 / javascript telephony apps for android and I have them both via php with ajax, in both of them I use google maps api and I need to know in both of them where the other guy is at that time how one moves and the other waits for him, then I have 2 questions:

  • In app 1 (moving), I need to update the marker every 10 seconds on the map without loading the entire page.

  • I load through ajax, the coordinates that are stored in the mysql database for both applications, so I need to set a second marker on each map, as well as the location of other applications, and track movements every 10 seconds.

This is how I load a map into each application:

function getPos() { navigator.geolocation.getCurrentPosition(onSuccess, onError, {enableHighAccuracy:true}); setTimeout(getPos, 10000); //call function after 10 seconds } function onSuccess(position) { lat = position.coords.latitude; lon = position.coords.longitude; console.log("Found - LAT: ", lat, "LON: ", lon); var currentposition = new google.maps.LatLng(lat,lon); var mapoptions = { zoom: 16, center: currentposition, mapTypeId: google.maps.MapTypeId.ROADMAP, icon: image }; var map = new google.maps.Map(document.getElementById("map"), mapoptions); var marker = new google.maps.Marker({ position: currentposition, map: map }); save_position_in_bd(); } function onError(error) { console.log('code: ' + error.code, 'message: ' + error.message); }

And I get the location of another application using ajax POST:

 $.ajax({ type: "POST", url: "http://localhost/call.php", data: "name=rui", dataType: 'json', success: function(data){ lat = data.lat;//get other apps lat lon = data.lon;//get other apps lon }, error: function(jqXHR, textStatus, errorThrown ){ console.log("POST: ", jqXHR, textStatus, errorThrown); } });

What can I do to solve my problems? I tried updating the map in different functions and tried to load only the marker, but it does not work. I also use the exact api that I use:

 http://maps.googleapis.com/maps/api/js?sensor=false

SOLVED: The answer is to split the code into different functions and only call the token to update it:

 function getPos() {//initial function to read the position estado = "livre"; navigator.geolocation.getCurrentPosition(onSuccess, onError, {enableHighAccuracy:true}); setTimeout(keep_alive, 10000); //read every 10 seconds } function onSuccess(position) {//read map and mark it in the map lat = position.coords.latitude; lon = position.coords.longitude; console.log("Found - LAT: ", lat, "LON: ", lon); var image = '/img/taxi_green.png'; var mapoptions = { zoom: 16, center: new google.maps.LatLng(lat,lon), mapTypeId: google.maps.MapTypeId.ROADMAP, icon: image }; map = new google.maps.Map(document.getElementById("map"), mapoptions); marker = new google.maps.Marker({ position: new google.maps.LatLng(lat,lon), map: map }); save_position(); } function keep_alive() {//read position and mark it in the map navigator.geolocation.getCurrentPosition(onRefresh, onError, {enableHighAccuracy:true}); save_position(); setTimeout(keep_alive, 10000); //read every 10 seconds } //refresh only the marker function onRefresh(position) { lat = position.coords.latitude; lon = position.coords.longitude; console.log("Found - LAT: ", lat, "LON: ", lon); marker.setPosition(new google.maps.LatLng(lat, lon));//refresh marker map.setCenter(new google.maps.LatLng(lat, lon));//resfresh center of the map } function trace_client() {//mark clients position in the map //clientMarker.setPosition(new google.maps.LatLng(client_lat, client_lon)); clientMarker = new google.maps.Marker({ position: new google.maps.LatLng(client_lat,client_lon), map: map }); console.log("client marked in the map"); } function onError(error) { console.log('code: ' + error.code, 'message: ' + error.message); }
+4
source share
1 answer

To facilitate the search, here is a solution.

The answer is to split the code into different functions and only call the marker to update it:

 function getPos() {//initial function to read the position estado = "livre"; navigator.geolocation.getCurrentPosition(onSuccess, onError, {enableHighAccuracy:true}); setTimeout(keep_alive, 10000); //read every 10 seconds } function onSuccess(position) {//read map and mark it in the map lat = position.coords.latitude; lon = position.coords.longitude; console.log("Found - LAT: ", lat, "LON: ", lon); var image = '/img/taxi_green.png'; var mapoptions = { zoom: 16, center: new google.maps.LatLng(lat,lon), mapTypeId: google.maps.MapTypeId.ROADMAP, icon: image }; map = new google.maps.Map(document.getElementById("map"), mapoptions); marker = new google.maps.Marker({ position: new google.maps.LatLng(lat,lon), map: map }); save_position(); } function keep_alive() {//read position and mark it in the map navigator.geolocation.getCurrentPosition(onRefresh, onError, {enableHighAccuracy:true}); save_position(); setTimeout(keep_alive, 10000); //read every 10 seconds } //refresh only the marker function onRefresh(position) { lat = position.coords.latitude; lon = position.coords.longitude; console.log("Found - LAT: ", lat, "LON: ", lon); marker.setPosition(new google.maps.LatLng(lat, lon));//refresh marker map.setCenter(new google.maps.LatLng(lat, lon));//resfresh center of the map } function trace_client() {//mark clients position in the map //clientMarker.setPosition(new google.maps.LatLng(client_lat, client_lon)); clientMarker = new google.maps.Marker({ position: new google.maps.LatLng(client_lat,client_lon), map: map }); console.log("client marked in the map"); } function onError(error) { console.log('code: ' + error.code, 'message: ' + error.message); }
+2
source

Source: https://habr.com/ru/post/1489763/

More articles:


All Articles