Okay so the problem is that when I bring up the console to see why my JS isn't working it shows that everything is working and there is no problems. I am trying to work on getting the outlines to the states and make polygons on each of them. I am not sure what I am doing wrong? It is like the javascript is doing nothing. I will put the code below.
The xml file is just the coordinates and states. I got this offline from another person doing this. This is not the whole file just a snip to help you make since of some of the code. It has the structure of:
<states> <state name="Alaska" colour="#ff0000"> <point lat="70.0187" lng="-141.0205"/> <point lat="70.1292" lng="-141.7291"/> <point lat="70.4515" lng="-144.8163"/> </state> <!DOCTYPE html> <html> <head> <script src="http://maps.googleapis.com/maps/api/js"></script> <style> #googleMap { height: 500px; width: 100%; } </style> <script> var x=new google.maps.LatLng(42.16,-100.72); function initialize() { var mapProp = { center:x, zoom:4, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); var xhttp = new XMLHttpRequest(); xhttp.open("GET","states.xml", true); xhttp.onreadystatechange = function() { if(xhttp.readyState == 4 && xhttp.status == 200){ var xmlDoc = xml.responseXML; //Here we grab that data from the states var states = xmlDoc.documentElement.getElementsByTagName("state"); //read each state's lines for(var e = 0; e < states.length; e++){ //grab each label for each state var name = states[e].getAttribute("name"); var color = states[e].getAttribute("colour"); //get all the points for each state var points = states[e].getElementsByTagName("point"); var myTrip=[]; for (var i = 0; i < points.length; i++){ myTrip[i] = new google.maps.LatLng(parseFloat(points[i].getAttribute("lat")), parseFloat(points[i].getAttribute("lng"))); } } } } var flightPath=new google.maps.Polygon({ path:myTrip, strokeColor:"#0000FF", strokeOpacity:0.8, strokeWeight:2, fillColor:"#0000FF", fillOpacity:0.4 }); flightPath.setMap(map); } console.log("Hi"); google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="googleMap"></div> </body> </html>
No comments:
Post a Comment