Обновление Google Map каждой секунды

218
13 декабря 2017, 21:56

Есть база даных с координатами автомобиля. База обновляется каждую секунду. Потому мне нужно автоматически обновлять Google Map каждую секунду. Искал в документации, но не нашел как ето сделать. 

setTimeout(function () { location.reload(true); }, 1000); 
  
var map; 
function initialize() { 
 var mapOptions = { 
	          center: new google.maps.LatLng(49.842547, 24.026544), 
	          zoom: 7, 
	          mapTypeId: google.maps.MapTypeId.ROADMAP 
 }; 
 map = new google.maps.Map(document.getElementById("map_canvas"), 
	            mapOptions); 
	        
	  //      google.maps.event.addListener(map,"titlesLoade",function(){setInterval(redrawMap,1000);}) 
	  		 
	        $.ajax({ 
	                url:'http://localhost:8087/api/getDataForSec', 
	                dataType: "json",  
	                success: function(data){ 
	                	var markers=[]; 
	                    $.each(data, function(key, data) { 
	                    	console.log(data.coordinatew, data.coordinatee); 
	                        var mylatlng = new google.maps.LatLng(data.coordinatew, data.coordinatee); 
	                        // Creating a marker and putting it on the map 
	                        var marker = new google.maps.Marker({ 
	                          position: mylatlng, 
	                          title:data.car_name 
	                        }); 
	                        markers.push(marker); 
	                        marker.setMap(map); 
	                    }); 
 
 
	 var markerCluster = new MarkerClusterer(map, markers, 
	            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); 
	     
	                } 
	            }); 
 
	      } 
	      google.maps.event.trigger(map, 'resize');
html { height: 100% } 
body { height: 80%; margin: 0; padding: 0 } 
#map_canvas { height: 100% }
<!DOCTYPE html> 
<html> 
 <head> 
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD6wbSA91NaZlfmGKyV_TaFxI6Dpxr3BdM&sensor=true"> 
  </script>  
  <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"> 
  </script>  
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>  
 </head> 
 <body onload="initialize()"> 
	 <div id="map_canvas" style="width:100%; height:100%"></div>  </body> 
</html>

Answer 1

Setinterval - Запускает выполнение функции, регулярно повторяет её через указанный интервал времени. 

function func() { 
   //marker.setPosition(); <- Google map marker position 
   console.log( 'Update' ); 
} 
setInterval(func, 1000);

READ ALSO
svg mask для лоадера
HTML

svg mask для лоадера

Есть такой интересный лоадер:

 217
Передача данных из формы в mysql
HTML

Передача данных из формы в mysql

Не могу передать данные из html формы в mysqlПодключение - работает

 227
Разница в объявлении JS файла
HTML

Разница в объявлении JS файла

Доброго времени суток ! Почему если объявить JS файл в начале кода html, некоторые функции не работают, а если в конце кода, то работают ? Никогда...

 195
Смена картинки при клике
HTML

Смена картинки при клике

Как написать на Jquery функцию, которая будет при нажатии на иконку плюс (изображение plusgif) будет менять его на минус (изображение minus

 242