javascript - Using XMLHttpRequest to load KML google maps, cannot load KML -


i have use xmlhttprequest grab kml file, because cannot directly make changes kml , needed draw out polygons own separate infowindows details on them stored in kml not description tag or couldn't grab easily. managed this, , polygons display , infowindows work. sizable program didn't display here, when load getkml function of mine, not work in development environment or present issues. whereas work on localhost.

this error message keep getting: uncaught networkerror: failed execute 'send' on 'xmlhttprequest': failed load 'https://someurl/polygons_live.kml'.

heres code, need first couple lines @ because thats xmlhttprequest used, excuse me messy code, still intern , refactoring:

  /** calls using xmlhttprequest grab kml file   * , later prints out 1 or more polygons   */ function getkml(kmlurl) { var xmlrequest = new xmlhttprequest(); xmlrequest.open("get", kmlurl, false); xmlrequest.send(); xmldoc = xmlrequest.responsexml; var x = xmldoc.getelementsbytagname("placemark"); // travels through each placemark tag in kml files var outage_time, restoration_time, event_number_value, fillcolour, bordercolour; var objarray = [];  (var = 0; < x.length; i++) {     // uses momentjs api create human readable dates     var date_format = "mmm dd, hh:mm a";     // gets event number     event_number_value = x[i].getelementsbytagname("simpledata")[2].childnodes[0].nodevalue;     // gets outage start time     var outage_time_value = x[i].getelementsbytagname("simpledata")[3].childnodes[0].nodevalue;     var outage_time_moment = moment(outage_time_value);     outage_time = outage_time_moment.format(date_format);     // gets estimated restoration time     var restoration_time_value = x[i].getelementsbytagname("simpledata")[5].childnodes[0].nodevalue;     // checks see if have restoration time or not     if (restoration_time_value === "2001-01-01t00:00:00") {         restoration_time = "not yet determined";     } else {         var restoration_time_moment = moment(restoration_time_value);         restoration_time = restoration_time_moment.format(date_format);     }     // gets coordinates of polygon     var coords = x[i].getelementsbytagname("coordinates")[0].childnodes[0].nodevalue;     var coordinate = coords.split(",0 ");     var coordjoined = coordinate.join();     var coordagain = coordjoined.split(",");     // gets colour of polygon     var colour = x[i].getelementsbytagname("styleurl")[0].childnodes[0].nodevalue;     // determines colour out of yellow, orange , red     if (colour === "#style1") {         fillcolour = '#f1c40f';         bordercolour = '#f1c40f';     } else if (colour === "#style2") {         fillcolour = '#e67e22';         bordercolour = '#e67e22';     } else {         fillcolour = '#c0392b';         bordercolour = '#c0392b';     }      // creates objects , adds array later used data     var obj = {         eventid : event_number_value,         offtime : outage_time,         restoretime : restoration_time,         fill : fillcolour,         bordercol : bordercolour     };     objarray.push(obj);      // create latlng array out of coordinate string     var polygoncoords = new array();     var j = 0;     var z = j + 1;     //var firstcoord = new google.maps.latlng();     while (z < coordagain.length) {         // adds first , last latlng array of polygoncoords         if ((j % 2) == 0) {             var co1 = parsefloat(coordagain[z]);             var co2 = parsefloat(coordagain[j]);             var newlatlng = new google.maps.latlng(co1, co2);             polygoncoords.push(newlatlng);         } else {             var co1 = parsefloat(coordagain[j]);             var co2 = parsefloat(coordagain[z]);             var newlatlng = new google.maps.latlng(co1, co2);             polygoncoords.push(newlatlng);         }         j++;         z++;     }     //removes last coordinate useless not number     polygoncoords.pop();      /** adds polygon polygon array      * , maps onto map      */     var newpoly = new google.maps.polygon({         paths : polygoncoords,         strokecolor : objarray[i].bordercol,         strokeopacity : 0.35,         strokeweight : 2,         fillcolor : objarray[i].fill,         fillopacity : 0.35     })     newpoly.setmap(map);     newpoly.set("eventnum", objarray[i].eventid);     newpoly.set("offtime", objarray[i].offtime);     newpoly.set("restime", objarray[i].restoretime);      google.maps.event.addlistener(newpoly, 'click',             attachinfowindow(newpoly));     polyarray.push(newpoly); } } 

update 1: found error later on appearing in console: xmlhttprequest cannot load https://someurl/polygons_live.kml. no 'access-control-allow-origin' header present on requested resource. origin 'https://someurl' therefore not allowed access.

its cross-domain request issue, i'm going start using relative addresses point when grabbing kml.

it resolved issue.


Comments