javascript - Plotting coordinates dynamically from XML file and refresh Markers only -
i'm trying plot markers on google maps coordinates xml file , below working script. xml dynamically updating. goal plot coordinates refreshing markers alone instead of whole page (currently achieving using auto refresh in 5 seconds).
<!doctype html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>work</title> <style> html, body { height: 100%; width: 100%; margin: 20; padding: 0; } #map_canvas { height: 100%;} </style> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=aizasyd5athizrrp1xlfheuvfcwz2kc4ogirbcw&sensor=false"></script> <script type="text/javascript" src="scripts/downloadxml.js"></script> <script> var infowindow; var map; function initialize() { var mapoptions = { zoom: 2, center: new google.maps.latlng(51.5072, 0.1275), } map = new google.maps.map(document.getelementbyid('map_canvas'), mapoptions); downloadurl("https://localhost/maps/data/markersfinal.xml", function(data) { var bounds = new google.maps.latlngbounds(); var markers = data.documentelement.getelementsbytagname("marker"); (var = 0; < markers.length; i++) { var latlng = new google.maps.latlng(parsefloat(markers[i].getattribute("latitude")), parsefloat(markers[i].getattribute("longitude"))); bounds.extend(latlng); var marker = createmarker(markers[i].getattribute("information"), latlng); }//finish loop map.fitbounds(bounds); }); //end downloadurl } function createmarker(information, latlng) { var marker = new google.maps.marker({ position: latlng, icon: 'https://localhost/maps/images/marker1.jpg', map: map }); google.maps.event.addlistener(marker, "click", function() { if (infowindow) infowindow.close(); infowindow = new google.maps.infowindow({content: information}); infowindow.open(map, marker); }); return marker; } </script> </head> <body onload="initialize()" > <div id="map_canvas"></div> <!-- <meta http-equiv="refresh" content="5" > --> </body> this downloadxml.js srript.
/** * returns xmlhttp instance use asynchronous * downloading. method never throw exception, * return null if browser not support xmlhttp reason. * @return {xmlhttprequest|null} */ function createxmlhttprequest() { try { if (typeof activexobject != 'undefined') { return new activexobject('microsoft.xmlhttp'); } else if (window["xmlhttprequest"]) { return new xmlhttprequest(); } } catch (e) { changestatus(e); } return null; }; /** * functions wraps xmlhttprequest open/send function. * lets specify url , call callback if * gets status code of 200. * @param {string} url url retrieve * @param {function} callback function call once retrieved. */ function downloadurl(url, callback) { var status = -1; var request = createxmlhttprequest(); if (!request) { return false; } request.onreadystatechange = function() { if (request.readystate == 4) { try { status = request.status; } catch (e) { // indicates request timed out in ff. } if (status == 200) { callback(request.responsexml, request.status); request.onreadystatechange = function() {}; } } } request.open('get', url, true); try { request.send(null); } catch (e) { changestatus(e); } }; /** * parses given xml string , returns parsed document in * dom data structure. function return empty dom node if * xml parsing not supported in browser. * @param {string} str xml string. * @return {element|document} dom. */ function xmlparse(str) { if (typeof activexobject != 'undefined' && typeof getobject != 'undefined') { var doc = new activexobject('microsoft.xmldom'); doc.loadxml(str); return doc; } if (typeof domparser != 'undefined') { return (new domparser()).parsefromstring(str, 'text/xml'); } return createelement('div', null); } /** * appends javascript file page. * @param {string} url */ function downloadscript(url) { var script = document.createelement('script'); script.src = url; document.body.appendchild(script); } here xml
<markers> <marker information="109.127.8.242" longitude="49.892010" latitude="40.377670" /> <marker information="109.169.87.141" longitude="-0.719860" latitude="51.522790" /> <marker information="109.229.210.250" longitude="24.105890" latitude="56.946000" /> <marker information="109.229.36.65" longitude="46.172170" latitude="48.279550" /> <marker information="109.235.59.44" longitude="12.095560" latitude="49.015000" /> </markers> any suggestions if efficient way refresh markers?
move call downloadurl own function. call function initialize function. set timeout recursively call function every 5 seconds. like:
var currentmarkers = []; function initialize() { var mapoptions = { zoom: 2, center: new google.maps.latlng(51.5072, 0.1275) } map = new google.maps.map(document.getelementbyid('map_canvas'), mapoptions); getxml(); var interval = window.setinterval(getxml, 5000); } function getxml() { (var = 0; < currentmarkers.length; i++) { currentmarkers[i].setmap(null); } downloadurl("https://localhost/maps/data/markersfinal.xml", function(data) { var bounds = new google.maps.latlngbounds(); var markers = data.documentelement.getelementsbytagname("marker"); (var = 0; < markers.length; i++) { var latlng = new google.maps.latlng(parsefloat(markers[i].getattribute("latitude")), parsefloat(markers[i].getattribute("longitude"))); bounds.extend(latlng); var marker = createmarker(markers[i].getattribute("information"), latlng); currentmarkers.push(marker); } //finish loop map.fitbounds(bounds); }); //end downloadurl }
Comments
Post a Comment