to request the XML continiously start a new delayed request via setTimeout
You'll need some distinct property for the markers. As it seems this distinct property could be the position, because they are static.
Create an object where you store the markers, and use the string-representation of the marker-position as keys.
To get the XML you may of course use AJAX(when the XML comes from a different domain they must either send an appropriate Access-Control-Allow-Origin-header or you must use a serverside proxy-script on your own server which forwards the XML).
To update the content use the setContent()-method of the infoBubble(use the desired content as first function-argument).
Note: when a infoBubble is already open you must call the method updateContent_() of the infoBubble, otherwise the content will be updated when the infoBubble will be opened the next time. You may use the method isOpen() to check if a infoBubble is already open.
A sample-implementation:
Function which requests the XML:
function downloadUrl(url,//URL of the XML-file
callback,//function 2 execute
map//the map
) {
var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP')
: new XMLHttpRequest;
request.onreadystatechange = function () {
if (request.readyState == 4) {
request.onreadystatechange = function () {};
callback(request, request.status, url, map, callback);
}
};
request.open('GET', url, true);
request.send(null);
}
Function which handles the response(used as callback-argument of the function above). It's not clear how the xml looks like, the function requires the following(you probably must modify it based on the given XML):
- the items which contain the properties for each marker/bubble have the nodeName
event
- latitude is stored in the items attribute
lat
- longitude is stored in the items attribute
lng
- title/caption/whateve of the event is stored in the items attribute
name
- the content will be the textContent of the item
e.g.
Sample-XML:
<events>
<event lat="41.8781136" lng="-87.629798" name="Bulls vs. Mavericks">1:0</event>
</events>
function xhrCallback(r, //the request
s, //request-status
u, //request-url
m, //map
c //callback
) {
var events = r.responseXML.getElementsByTagName('event');
if (!m.markers) {
//here we store the markers
m.markers = {};
}
//will be used later to remove markers which will not exist in the XML
var keys=Object.keys(m.markers);
for (var i = 0; i < events.length; ++i) {
//the current XML-node
var event = events[i],
position = new google.maps.LatLng(event.getAttribute('lat'),
event.getAttribute('lng')),
hash = position.toString(),
content = '<h2>' + event.getAttribute('name') + '</h2>' +
event.firstChild.data;
//when the hash doesn't exist in m.markers
if (!m.markers[hash]) {
//create a new marker & infobubble
m.markers[hash] = new google.maps.Marker({
map: m,
position: position,
bubble: new InfoBubble({
content: content
})
});
google.maps.event.addListener(m.markers[hash], 'click', function () {
this.bubble.open(this.getMap(), this)
});
google.maps.event.trigger(m.markers[hash], 'click');
} else {
m.markers[hash].bubble.setContent(content);
if (m.markers[hash].bubble.isOpen()) {
m.markers[hash].bubble.updateContent_();
}
//remove the current hash from the keys-array
(function(h){
var index=keys.indexOf(h);
if(index>=0){
keys.splice(index,1);
}
}(hash));
}
}
//remove markers and bubbles which doesn't exist in the XML
keys.forEach(function(k){
m.markers[k].setMap(null);
m.markers[k].bubble.close();
delete m.markers[k];
});
//new request
setTimeout(function () {
downloadUrl(u, c, m)
},
10000//delay in milliseconds
);
}
To execute it call 1 time:
downloadUrl('path/to/file.xml',
xhrCallback,//function from above
map//your google.maps.Map
);
Demo: http://jsfiddle.net/doktormolle/fwk5e1nq/
The demo simply set's the content to the current time, but the content will be retrieved via AJAX.
you'll see that the markers/bubbles sometimes disappear, this will happen when there are markers/bubbles in the map which will not be present in the updated XML(the script will remove them)
Example for a proxy-script:
<?php
$url='http://external.service.com/path/to/the.xml';
header('Content-Type:text/xml');
die(file_get_contents($url));
?>
