Member Avatar for trektrak
trektrak 0 Light Poster

I have this qoute.. how am i going to refresh only the php out;.. which generally generate xml..

<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>Google Maps JavaScript API v3 Example: Common Loader</title>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="util.js"></script>
<script type="text/javascript">
  var infowindow;
  var map;

  function initialize() {
    var myLatlng = new google.maps.LatLng(0, 0);
    var myOptions = {
      zoom: 10,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    downloadUrl("phpsqlajax_genxml3.php", function(data) {
      var markers = data.documentElement.getElementsByTagName("marker");
      for (var i = 0; i < markers.length; i++) {
        var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
        var marker = createMarker(markers[i].getAttribute("user"), latlng);
       }
     });
  }

  function createMarker(user, latlng) {
    var marker = new google.maps.Marker({position: latlng, map: map});
    google.maps.event.addListener(marker, "click", function() {
      if (infowindow) infowindow.close();
      infowindow = new google.maps.InfoWindow({content: user});
      infowindow.open(map, marker);
    });
    return marker;
  }



</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

I would love to refresh only the downloadUrl("phpsqlajax_genxml3.php", function(data) { which updating the markers..

Anyone ??

  • 1 Contributor
  • 0 Replies
  • 125 Views

Dani AI

Generated

For : you only need to poll the PHP endpoint that returns the XML and update the existing marker objects on the map — do not re-create the whole map. Keep a lookup (object/hash) keyed by a stable id for each marker, reuse a single InfoWindow, and on each poll add new markers, move existing ones with setPosition, and remove markers that no longer appear in the feed. Use a cache-busting query string (e.g. ?_= + Date.now()) to avoid stale responses.

Example pattern (replace your_xml_endpoint.php and adapt attribute names):

var map; // already created
var active = {}; // id -> google.maps.Marker
var infoPopup = new google.maps.InfoWindow();

function pollMarkers() {
  var url = 'your_xml_endpoint.php?_=' + Date.now();
  fetch(url).then(function(r){ return r.text(); }).then(function(text){
    var xml = new DOMParser().parseFromString(text, 'application/xml');
    var nodes = xml.documentElement.querySelectorAll('marker');
    var seen = {};

    for (var i = 0; i < nodes.length; i++) {
      var node = nodes[i];
      var id = node.getAttribute('id') || (node.getAttribute('lat') + ',' + node.getAttribute('lng'));
      var lat = parseFloat(node.getAttribute('lat'));
      var lng = parseFloat(node.getAttribute('lng'));
      var title = node.getAttribute('user') || '';

      seen[id] = true;
      if (!active[id]) {
        var m = new google.maps.Marker({ position: new google.maps.LatLng(lat, lng), map: map });
        (function(content, marker){
          marker.addListener('click', function(){
            infoPopup.setContent(content);
            infoPopup.open(map, marker);
          });
        })(title, m);
        active[id] = m;
      } else {
        active[id].setPosition(new google.maps.LatLng(lat, lng));
      }
    }

    for (var k in active) {
      if (!seen[k]) { active[k].setMap(null); delete active[k]; }
    }
  }).catch(function(e){ console.error('Marker poll failed', e); });
}

setInterval(pollMarkers, 5000);

Notes and troubleshooting:

  • Ensure the PHP returns well-formed XML and Content-Type: text/xml (or switch to JSON to simplify parsing).
  • Provide a unique id for each marker in the XML (preferable to relying on lat/lng).
  • If the map and endpoint are on different origins, enable CORS on the server.
  • For real-time updates or many markers, consider JSON + WebSockets or Server-Sent Events to reduce poll overhead.

Further reading: Fetch API and DOMParser on MDN:
Fetch API
DOMParser

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.