I created a script where it will get lat and lon from sql and place a marker on the google map embedded, And I want to run the script every second like is auto getting data and place marker automatically.
<script>
var infoWindow= null;
var map = null;
var markersArray = [];
function initMap() {
var myLatlng = new google.maps.LatLng(14.657971, 120.976970);
var map = new google.maps.Map(document.getElementById('map_canvas'), {
center: myLatlng,
zoom: 16,
streetViewControl : false,
mapTypeId : google.maps.MapTypeId.HYBRID,
});
var infoWindow = new google.maps.InfoWindow;
updateMaps();
function updateMaps() {
// Change this depending on the name of your PHP or XML file
downloadUrl('phpsqlajax_genxml.php?t=', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var name = markerElem.getAttribute('name');
var address = markerElem.getAttribute('address');
var type = markerElem.getAttribute('type');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
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.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
}
window.setInterval(updateMaps, 1000);
</script>
var update;
function updateInterval() {
update = setInterval(function() {
updateMaps()
}, 1000);
}
updateInterval();
You have to use JQuery to load updateInterval() when the document is ready or write <script>updateInterval();</script> at the end of the body.
Related
How to use MarkerCluster with geolocations from a database, displaying markers on the map works fine. but I haven't been able to implement marker clustering.
Any help would be appreciated
var customLabel = {residential: {label: 'R'},commercial: {label: 'C'},both: {label: 'B'}};
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(43.6191,-113.9772),
zoom: 8
});
var infoWindow = new google.maps.InfoWindow;
downloadUrl('URL/xml.php', function(data) {
var xml = data.responseXML;
var xmlmarker = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(xmlmarker, function(markerElem) {
var type = markerElem.getAttribute('service');
var address = markerElem.getAttribute('address');
var icon = customLabel[type] || {};
var markers = [];
var markerCluster = new MarkerClusterer(map, markers);
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
var locations = results[0].geometry.location;
var marker = new google.maps.Marker({ position: locations, label: icon.label });
markers.push(marker);
markerCluster.addMarker(marker);
})
});
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true); request.send(null);
}
You are creating a new MarkerCluster every time you create a marker. Create it once, add all the markers to the same MarkerClusterer object.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(43.6191, -113.9772),
zoom: 8
});
var infoWindow = new google.maps.InfoWindow;
// ********************************************************************************
// ** move the markers array and the marker clusterer here, outside of the loop. **
// ********************************************************************************
var markers = [];
var markerCluster = new MarkerClusterer(map, [], {
imagePath: "https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m"
});
downloadUrl('http://map.northwestdatacom.com/xml.php', function(data) {
var xml = data.responseXML;
var xmlmarker = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(xmlmarker, function(markerElem) {
var id = markerElem.getAttribute('id');
var name = markerElem.getAttribute('name');
var phone = markerElem.getAttribute('phone');
var email = markerElem.getAttribute('email');
var host = markerElem.getAttribute('host');
var type = markerElem.getAttribute('service');
var address = markerElem.getAttribute('address');
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name;
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = address;
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': address
}, function(results, status) {
var locations = results[0].geometry.location;
var marker = new google.maps.Marker({
position: locations,
label: icon.label
});
markers.push(marker);
markerCluster.addMarker(marker);
})
});
});
}
proof of concept fiddle
code snippet:
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
<script>
var customLabel = {
residential: {
label: 'R'
},
commercial: {
label: 'C'
},
both: {
label: 'B'
}
};
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(43.6191, -113.9772),
zoom: 6
});
var infoWindow = new google.maps.InfoWindow;
var markers = [];
var markerCluster = new MarkerClusterer(map, [], {
imagePath: "https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m"
});
// downloadUrl('http://map.northwestdatacom.com/xml.php', function(data) {
var xml = parseXml(xmlStr); // data.responseXML;
var xmlmarker = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(xmlmarker, function(markerElem) {
var id = markerElem.getAttribute('id');
var name = markerElem.getAttribute('name');
var phone = markerElem.getAttribute('phone');
var email = markerElem.getAttribute('email');
var host = markerElem.getAttribute('host');
var type = markerElem.getAttribute('service');
var address = markerElem.getAttribute('address');
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name;
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = address;
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': address
}, function(results, status) {
var locations = results[0].geometry.location;
var marker = new google.maps.Marker({
position: locations,
label: icon.label
});
markers.push(marker);
markerCluster.addMarker(marker);
})
});
// });
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
function parseXml(str) {
if (window.ActiveXObject) {
var doc = new ActiveXObject('MicrosoftXMLDOM');
doc.loadXML(str);
return doc;
} else if (window.DOMParser) {
return (new DOMParser).parseFromString(str, 'text/xml');
}
};
google.maps.event.addDomListener(window, "load", initMap);
var xmlStr = '<markers><marker id="91" name="marcos centeno" phone="2083128603" email="marcoscenteno89#gmail.com" address="16111 17th st Heyburn 83336" service="residential" host=""/><marker id="90" name="Nathan Rasmussen" phone="123" email="nathan#truckmaster.com" address="290 west 125 south Idaho falls 83404" service="residential" host=""/><marker id="87" name="LIZ SANZON" phone="4564352410" email="lizeth.sanzon#dynamitewireless.com" address="20491 N Main ST, CAREY 83320" service="residential" host=""/><marker id="88" name="Liz Sanzon" phone="9674546465" email="lizeth.sanzon#dynamitewireless.com" address="244700 Ustick Rd, Wilder 83676" service="commercial" host=""/><marker id="89" name="Lizeth Sanzon" phone="4564352410" email="lizeth.sanzon#dynamitewireless.com" address=" 5870 Rock River Lane Kuna 83634" service="residential" host=""/><marker id="78" name="Ryan Rustici" phone="2087052118" email="ryan.rustici#gmail.com" address="11324 Interlaaken Dr SW Lakewood 98498" service="both" host=""/><marker id="86" name="Liz San" phone="31546304501" email="lizeth.sanzon#dynamitewireless.com" address="283 n 2600 e Roberts ID" service="residential" host=""/><marker id="77" name="Ryan Rustici" phone="2085551212" email="ryan#aol.com" address="4035 Ross Ave Ammon 83406" service="residential" host=""/><marker id="84" name="Marcos Centeno" phone="2083128603" email="marcoscenteno89#gmail.com" address="785 Garfield Ave, 10 Idaho Falls 83401" service="residential" host=""/><marker id="85" name="Marcos Centeno" phone="2083128603" email="mc172000#yaho.com" address="785 Garfield Ave, 10 Idaho Falls 83401" service="residential" host="199-33-218-234.cpe.safelink.net"/></markers>';
</script>
<script src="https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js"></script>
Hello I have a file with the next code, a file named google-maps.php
<script>
var customIcons = {
restaurant: {
icon: 'img/homepage/pin.png'
},
cafenele: {
icon: 'img/homepage/pni2.png'
}
};
var markerGroups = {
"restaurant": [],
"cafenele": []
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.059516, 21.947613),
zoom: 13,
scrollwheel: false,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow();
// Change this depending on the name of your PHP file
var bounds = new google.maps.LatLngBounds();
downloadUrl("googlemaps/phpsqlajax_genxml2.php", function (data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var id_marker = markers[i].getAttribute("id_marker");
var name = markers[i].getAttribute("name");
var category = markers[i].getAttribute("category");
var address = markers[i].getAttribute("address");
var img = markers[i].getAttribute("img");
var phone = markers[i].getAttribute("phone");
var schedule = markers[i].getAttribute("schedule");
var link = markers[i].getAttribute("link");
document.getElementById('categorii').src = img;
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
bounds.extend(point);
var html = "<u class='title-google-maps'>" + name + "</u> <p class='google-maps'>" + category + "</p>" + address + "<p class='google-maps'>" + phone + "</p>" + "<p class='google-maps-2'>" + schedule + "</p>" + link;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
id_marker: id_marker,
image: img,
type: type
});
if (!markerGroups[type])
markerGroups[type] = [];
markerGroups[type].push(marker);
marker.setVisible(false);
bindInfoWindow(marker, map, infoWindow, html);
}
map.fitBounds(bounds);
toggleGroup("spa");
});
}
function toggleGroup(type)
{
for (var key in markerGroups)
{
for (var i = 0; i < markerGroups[key].length; i++)
{
var marker = markerGroups[key][i];
if (type == key) {
marker.setVisible(true);
} else
{
marker.setVisible(false);
}
}
}
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(html);
infoWindow.open(map, marker);
document.getElementById('categorii').src = marker.image;
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function () {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {
}
</script>
If I put my code in JS the code works but I need to put in PHP file in future I want to echo some data from database. The error I have in console is Uncaught SyntaxError: Unexpected token< . Why is working if the file type is JS and why is not working on PHP file type? What cand I do?
You need to close php tag before script and open in after script like this
<?php
//some php code
?>
<script>
...
..
</script>
<?php
//php code
?>
My javascript plots different points on a Google maps map after retrieving the lat long etc. from my xml file. However, when a marker is clicked, it is supposed to show an info window with the location name (which it does). The problem is that the function stoptimes() which is called to get the times for the bus stop clicked, is not being called. I don't know why this is. I have used syntax validators to check it and it reports no error message. Any ideas as to what it could be?
function stoptimes(stop) {
downloadiv("./times.php?stop=" + stop, function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("weather");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("arrival");
document.getElementById("h2").innerHTML = name;
}
});
}
function downloadiv(url, callback) {
var requesta = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
requesta.onreadystatechange = function() {
if (requesta.readyState == 4) {
requesta.onreadystatechange = donada;
callback(requesta, requesta.status);
}
};
requesta.open('GET', url, true);
requesta.send(null);
}
function donada() {}
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(53.5, -8),
zoom: 7,
});
var infoWindow = new google.maps.InfoWindow;
geocoder = new google.maps.Geocoder();
// Change this depending on the name of your PHP file
downloadUrl("stop-locations.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var location = markers[i].getAttribute("name");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var lat=markers[i].getAttribute("lat");
var lng=markers[i].getAttribute("lng");
var html = "<b>" + name + "</b> <br/>";
var stopid = markers[i].getAttribute("stopid");
var marker = new google.maps.Marker({
position:point,
map: map
});
bindInfoWindow(marker, map, infoWindow, html, stopid);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html, stopid) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
stoptimes(stopid);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
None of your functions is being called so your code isn't doing anything.
I think you forgot to call bindInfoWindow
Do you call load() anywhere in your code?
Did you mean load() to be onload(), as in window.onload?
I have just loaded the following code into my webpage and after many hours of troubleshooting, I can't get the Markers to show up?
I have confirmed that the parsing php file is working.
Javascript:
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
var customIcons = {
accom: {
icon: 'images/google_map_icon_green.png'
},
food: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
}
};
function initialize() {
var mapCanvas = document.getElementById('map_canvas');
var mapOptions = {
center: new google.maps.LatLng(
<?php if ($_COOKIE[company] == 'ch') { echo $ch[hls_lat].", ".$ch[hls_long]; } elseif ($_COOKIE[company] == 'shc') { echo $shc[hls_lat].", ".$shc[hls_long]; } elseif ($_COOKIE[company] == 'lmh') { echo $lmh[hls_lat].", ".$lmh[hls_long]; }?>),
zoom: 12,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(mapCanvas, mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
var infoWindow = new google.maps.InfoWindow;
downloadUrl("required/xml_parse.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var id = markers[i].getAttribute("id");
var name = markers[i].getAttribute("name");
var icao = markers[i].getAttribute("icao");
var type = markers[i].getAttribute("type");
var elev = markers[i].getAttribute("elev");
var conname = markers[i].getAttribute("contactname");
var connum = markers[i].getAttribute("contactnum");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> - " + icao + "<br/>" + conname + " - " + connum;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
SetMap: map_canvas,
position: point,
icon: icon.icon
});
bindInfoWindow(marker, map_canvas, infoWindow, html);
}
});
function bindInfoWindow(marker, map_canvas, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
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.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
HTML:
<br />
<div class="inner-article-header"><h2>Map of Locations</h2></div>
<div id="map_canvas" style="height:565px; width:754px; margin:2px;"></div>
</div>
This is incorrect:
SetMap: map_canvas,
Should be (see MarkerOptions in the documentation):
map: map,
corrected marker constructor:
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
Add the parsing of the XML into the initialize function, so map is valid when you add the markers:
function initialize() {
var mapCanvas = document.getElementById('map_canvas');
var mapOptions = {
center: new google.maps.LatLng(0,0),
zoom: 4,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(mapCanvas, mapOptions);
downloadUrl("example.xml", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var id = markers[i].getAttribute("id");
var name = markers[i].getAttribute("name");
var icao = markers[i].getAttribute("icao");
var type = markers[i].getAttribute("type");
var elev = markers[i].getAttribute("elev");
var conname = markers[i].getAttribute("contactname");
var connum = markers[i].getAttribute("contactnum");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> - " + icao + "<br/>" + conname + " - " + connum;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
working example (using one of my existing xml files, since you didn't provide any example data)
You have additional problems with the call to bindInfoWindow and its definition (map_canvas, should be map)
I've followed the PHP/MYSQL tutorial on Google Maps found here.
I'd like the markers to be updated from the database every 5 seconds or so.
It's my understanding I need to use Ajax to periodicity update the markers, but I'm struggling to understand where to add the function and where to use setTimeout() etc
All the other examples I've found don't really explain what's going on, some helpful guidance would be terrific!
This is my code (Same as Google example with some var changes):
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(37.80815648152641, 140.95355987548828),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("nwmxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var host = markers[i].getAttribute("host");
var type = markers[i].getAttribute("active");
var lastupdate = markers[i].getAttribute("lastupdate");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + "Host: </b>" + host + "<br>" + "<b>Last Updated: </b>" + lastupdate + "<br>";
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
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.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
I hope somebody can help me!
Please note I have not tested this as I do not have a db with xml handy
First of all you need to split your load() function into a function that initializes the map & loads the markers on domready and a function that you will use later to process the xml & update the map with. This needs to be done so you do not reinitialize the map on every load.
Secondly you need to decide what to do with markers that are already drawn on the map. For that purpose you need to add them to an array as you add them to the map. On second update you have a choice to either redraw the markers (rebuild the array) or simply update the existing array. My example shows the scenario where you simply clear the old markers from the screen (which is simpler).
//global array to store our markers
var markersArray = [];
var map;
function load() {
map = new google.maps.Map(document.getElementById("map"), {
center : new google.maps.LatLng(37.80815648152641, 140.95355987548828),
zoom : 13,
mapTypeId : 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// your first call to get & process inital data
downloadUrl("nwmxml.php", processXML);
}
function processXML(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
//clear markers before you start drawing new ones
resetMarkers(markersArray)
for(var i = 0; i < markers.length; i++) {
var host = markers[i].getAttribute("host");
var type = markers[i].getAttribute("active");
var lastupdate = markers[i].getAttribute("lastupdate");
var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + "Host: </b>" + host + "<br>" + "<b>Last Updated: </b>" + lastupdate + "<br>";
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map : map,
position : point,
icon : icon.icon,
shadow : icon.shadow
});
//store marker object in a new array
markersArray.push(marker);
bindInfoWindow(marker, map, infoWindow, html);
}
// set timeout after you finished processing & displaying the first lot of markers. Rember that requests on the server can take some time to complete. SO you want to make another one
// only when the first one is completed.
setTimeout(function() {
downloadUrl("nwmxml.php", processXML);
}, 5000);
}
//clear existing markers from the map
function resetMarkers(arr){
for (var i=0;i<arr.length; i++){
arr[i].setMap(null);
}
//reset the main marker array for the next call
arr=[];
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
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.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
setInterval(function() {
downloadUrl("conection/cargar_tecnicos.php", function(data) {
var xml = data.responseXML;
markers = xml.documentElement.getElementsByTagName("marker");
removeAllMarkers();
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var fecha = markers[i].getAttribute("fecha");
var id_android = markers[i].getAttribute("id_android");
var celular = markers[i].getAttribute("celular");
var id = markers[i].getAttribute("id");
var logo = markers[i].getAttribute("logo");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<div class='infowindow'>"
+"<br/><div style='text-align:center;'><img src="+logo+"><br/>"
+"<b>" + name + "</b></div><br/>"
+"<br/><label><b>Celular:</b></label>" + celular+""
+"<br/><label><b>Id Android:</b></label>" + id_android+""
+"<br/><label><b>Fecha y Hora:</b></label>" + fecha+""
+"<br/><br/><div style='text-align:center;'><a><input style=';' id='pop' type='image' value='"+id+"' class='ASD' img src='img/vermas.png' title='Detalles'/></a></div></div>";
var icon = customIcons[type] || {};
marker[i] = new google.maps.Marker({
position: point,
icon: icon.icon,
shadow: icon.shadow,
title:name
});
openInfoWindow(marker[i], map, infoWindow, html);
marker[i].setMap(map);
}
});
},10000);
}
function removeAllMarkers(){// removes all markers from map
for( var i = 0; i < marker.length; i++ ){
marker[i].setMap(null);
}
}