Click here to Skip to main content
15,867,308 members
Please Sign up or sign in to vote.
4.00/5 (1 vote)
Hey there, I am following this tutorial:

https://developers.google.com/kml/articles/phpmysqlkml[^]

it works beuatifully. I read in data from the database and generate an XML file and overlay it on google maps.

The code is exactly like the tutorial. the problem now is i am auto-refreshing the html page which calls the php page. the php script generates the XML file. I am using the Meta header to auto refresh the html page. it is extremely annoying to see the entire page reload every 5 seconds. I require a refresh as I am building a remote logger that has dynamic capability.

I would like to just refresh the markers. and not the page. The html file code is below. please help urgently. thanks

HTML
<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Drifter</title>

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    //<![CDATA[

    setTimeout(function () {
       window.location.reload();
    }, 5000);


    var customIcons = {
      blue: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      },
      red: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      }
    };


    function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(-29.86519774,30.98538962),
        zoom: 18,
        mapTypeId: 'terrain'
      }); 

      
      var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP file
      downloadUrl("genxml.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");

        for (var i = 0; i < markers.length; i++) {
          
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lon")));
          

          var icon = customIcons["blue"] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          });


          

          bindInfoWindow(marker, map, infoWindow);
        }
      });
    }

 

    function bindInfoWindow(marker, map, infoWindow) {
      google.maps.event.addListener(marker, 'click', function() {
        
        infoWindow.open(map, marker);
      });
    }
     
    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request. önreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}

    //

</script>

  </head>

  <body onload="load()">
    <div id="map" style="width: 1000px; height: 600px"></div>
  </body>

</html>	


thanks
Posted
Updated 19-Feb-17 23:27pm

1 solution

Try This I am using
setInterval


<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Drifter</title>

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        //<![CDATA[
        var markers = [];
        setInterval(function () {
            DeleteMarkers();
            BindMarker();
        }, 5000);

        function DeleteMarkers() {
            //Loop through all the markers and remove
            for (var i = 0; i < markers.length; i++) {
                markers[i].setMap(null);
            }


            markers = [];
        };
        
        var customIcons = {
            blue: {
                icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
                shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            red: {
                icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
                shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            }
        };

        var map = null;
        var infoWindow = null;
        function load() {
            map = new google.maps.Map(document.getElementById("map"), {
                center: new google.maps.LatLng(-29.86519774, 30.98538962),
                zoom: 18,
                mapTypeId: 'terrain'
            });


            infoWindow = new google.maps.InfoWindow;

            // Change this depending on the name of your PHP file
            BindMarker();
        }

        function BindMarker() {
            downloadUrl("genxml.php", function (data) {
                var xml = data.responseXML;
                var markers = xml.documentElement.getElementsByTagName("marker");

                for (var i = 0; i < markers.length; i++) {

                    var point = new google.maps.LatLng(
                        parseFloat(markers[i].getAttribute("lat")),
                        parseFloat(markers[i].getAttribute("lon")));


                    var icon = customIcons["blue"] || {};
                    var marker = new google.maps.Marker({
                        map: map,
                        position: point,
                        icon: icon.icon,
                        shadow: icon.shadow
                    });

                    markers.push(marker);


                    bindInfoWindow(marker, map, infoWindow);
                }
            });
        }

        function bindInfoWindow(marker, map, infoWindow) {
            google.maps.event.addListener(marker, 'click', function () {

                infoWindow.open(map, marker);
            });
        }

        function downloadUrl(url, callback) {
            var request = window.ActiveXObject ?
                new ActiveXObject('Microsoft.XMLHTTP') :
                new XMLHttpRequest;

            request.onreadystatechange = function () {
                if (request.readyState == 4) {
                    request.önreadystatechange = doNothing;
                    callback(request, request.status);
                }
            };

            request.open('GET', url, true);
            request.send(null);
        }

        function doNothing() { }

        //

</script>

  </head>

  <body onload="load()">
    <div id="map" style="width: 1000px; height: 600px"></div>
  </body>

</html>	
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900