Dynamiczne wyświetlanie markerów na mapie google

0

Witam serdecznie,
Mam taki kod:
http://pastebin.com/h7gLaDQi

 
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>mapka</title>
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css">
      <script>
      $(function() {
          
    jQuery(function($){
	$.datepicker.regional['pl'] = {
		closeText: 'Zamknij',
		prevText: '&#x3c;Poprzedni',
		nextText: 'Następny&#x3e;',
		currentText: 'Dziś',
		monthNames: ['Styczeń','Luty','Marzec','Kwiecień','Maj','Czerwiec',
		'Lipiec','SierpieĹń','Wrzesień','Październik','Listopad','GrudzieĹń'],
		monthNamesShort: ['Sty','Lu','Mar','Kw','Maj','Cze',
		'Lip','Sie','Wrz','Pa','Lis','Gru'],
		dayNames: ['Niedziela','Poniedziałek','Wtorek','Środa','Czwartek','Piątek','Sobota'],
		dayNamesShort: ['Nie','Pn','Wt','Śr','Czw','Pt','So'],
		dayNamesMin: ['N','Pn','Wt','Śr','Cz','Pt','So'],
		dateFormat: 'yy-mm-dd', firstDay: 1,
		isRTL: false};
	$.datepicker.setDefaults($.datepicker.regional['pl']);
});

        /*  
        setInterval(function(){cache_clear()},3000);
         function cache_clear()
        {
         window.location.reload(true);
        }
        */
          
        $('#datepicker').datepicker();
          $.datepicker.setDefaults(
              $.extend(
                {'dateFormat':'yy-mm-dd'},
                $.datepicker.regional['pl']
              )
            );
      });
      </script>
    <script type="text/javascript">
         var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
         new google.maps.Size(32, 32), new google.maps.Point(0, 0),
         new google.maps.Point(16, 32));
         var center = null;
         var map = null;
         var currentPopup;
         var bounds = new google.maps.LatLngBounds();
         function addMarker(lat, lng, info) {
         var pt = new google.maps.LatLng(lat, lng);
         bounds.extend(pt);
         var marker = new google.maps.Marker({
         position: pt,
         icon: icon,
         map: map
         });
         var popup = new google.maps.InfoWindow({
         content: info,
         maxWidth: 300
         });
         google.maps.event.addListener(marker, "click", function() {
         if (currentPopup != null) {
         currentPopup.close();
         currentPopup = null;
         }
         popup.open(map, marker);
         currentPopup = popup;
         });
         google.maps.event.addListener(popup, "closeclick", function() {
         map.panTo(center);
         currentPopup = null;
         });
         }
         function initMap() {
         map = new google.maps.Map(document.getElementById("map"), {
         center: new google.maps.LatLng(0, 0),
         zoom: 14,
         mapTypeId: google.maps.MapTypeId.ROADMAP,
         mapTypeControl: false,
         mapTypeControlOptions: {
         style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
         },
         navigationControl: true,
         navigationControlOptions: {
         style: google.maps.NavigationControlStyle.SMALL
         }
         });
         addMarker(18.17374500, 54.61604900,'<b></b><br/>1');
addMarker(54.61604900, 18.17374500,'<b></b><br/>1');
         center = bounds.getCenter();
         map.fitBounds(bounds);
 
 }

  </script>
  </head>

<div style="width:100%;height:100px;text-align:center">
    <a href="index.php">Ostatnia pozycja</a><br/><br/>
    <a href="index.php?i=last_day">Dzisiejszy dzień</a><br/><br/>
    
    <form action="index.php" method="get">
        Wybrany dzień<input type="text" name="select_day" value="2016-04-02" id="datepicker">
        <input type="submit" value="Pokaż">
    </form>
    
</div>  
    
  <body onload="initMap()">
    <div id="map" class="map" style="width:100%; height:100%"></div>
  </body>
</html>

Chciałbym żeby punkty do wyświetlenia na mapce nie były statycznie ładowane przy wczytaniu strony - a odświeżane co 10 sekund...
Wie ktoś może jak to zrobić?

Z góry dziękuję za pomoc :)

0

Musisz pobierać lokalizację tych markerów z jakiejś bazy lub z pliku najlepiej AJAX'em i wrzucić to do setInterval żeby przetwarzało to co zwróci AJAX.

1 użytkowników online, w tym zalogowanych: 0, gości: 1