Extract GPS coordinations from XML file and insert into Google Maps?
I’m trying to extract the name and satelite coordinations from a XML file and then plug them into a Google map overview with markers but I’m having difficulties.
I already have the php code where I extract my elements I need but to go from there to actually plugging them into google maps is where I run my head against the wall.
I have this code I’ve found and try out:
<script src="http://maps.google.com/maps?file=api&v=2&key=my_google_api_key" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map = null;
var geocoder = null;
function l开发者_JS百科oad() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
geocoder = new GClientGeocoder();
// my XML file
GDownloadUrl("maste.xml", function(data) {
var xml = GXml.parse(data);
//MasteIBrug is the tag around each child
var markers = xml.documentElement.getElementsByTagName("MasteIBrug");
for (var i = 0; i < markers.length; i++) {
//Positionsvejnavn is my first attribute in the XML file
var name = markers[i].getAttribute("Positionsvejnavn");
//Geografisk_placering is my second attribute in the XML file
var coordination = markers[i].getAttribute("Geografisk_placering");
showCoor(coordination,name);
}
});
}
}
function showCoor(coordination, name) {
if (geocoder) {
geocoder.getLatLng(
name+","+coordination,
function(point) {
if (!point) {
alert(coordination + " not found");
} else {
map.setCenter(point, 13);
var marker = createMarker(point, name, coordination);
map.addOverlay(marker);
}
});
}
}
function createMarker(point, name, coordination) {
var marker = new GMarker(point);
var html = "<b>" + name + "</b> <br/>" + coordination;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div>
<div id="map" style="width: 1000px; height: 600px"></div>
</div>
</body>
This is my first time playing around with the Google maps API so I might have something wrong or using a wrong code to create but I can’t really seem to get any further.
Any help or advice would be very much appreciated.
your code snippet
var markers = xml.documentElement.getElementsByTagName("MasteIBrug");
for (var i = 0; i < markers.length; i++) {
// Positionsvejnavn is my first attribute in the XML file
var name = markers[i].getAttribute("Positionsvejnavn");
// Geografisk_placering is my second attribute in the XML file
var coordination = markers[i].getAttribute("Geografisk_placering");
}
have you tried altering the code above so that the variables in the for loop have the same name as the xml attributes. this makes the code easier to read and follow and less likely for you to forget what each one is doing.
secondly have your xml file open in a text editor or whatever (even showing as xml in a web page in a separate tab or window) THEN in the for loop add this line of code after the xml has been parsed.
document.getElementbyId("map").innerHTML = "Positionsvejnavn = " + name;
this should stop the script from running after parsing first attribute in xml file and print it to the screen and you are expecting to see whatever value is held in xml atributre Positionsvejnavn
if there is any screen output and it is the same as what is in Positionsvejnavn repeat again like this
document.getElementbyId("map").innerHTML = "Geografisk_placering = " + coordination;
and see if this displays what is in xml "Geografisk_placering" if it is then you are correctly parsing the xml if it isnt you know to correct this before continuing.
and proper code should look like this for purpose of reliable debugging
document.getElementbyId("map").innerHTML = "cordination = " + coordination;
easy to follow easier to understand and debug and stay focuseed on what variables are doing what function they perform what dat they hold and to remember what you expect from their output.
Lastly google expects xml markers to be in a certain format in the xml file. it's like this
<markers>
<marker name="my name whatever"
address="an address of somewhere"
lat="52,00"
lng="0.223"
</marker>
<marker name="my friends whatever"
address="an address of somewhere else"
lat="-52,00"
lng="-120.223"
</marker>
</markers>
and have you got all the files in one directory and correctly referenced some web builders and text editors put in an extra / in directory hrefs etc others leave them out.
so you might get different urls from different applications like this
APP A might mangle a url to be like this /directory/file.xml
APP B might mangle it to be like this //directory/file.xml
and you have to add or remove a slash depending upon your set up.
and have you tried putting all the files into your local server and running from there and/or a combination of all of the above.
If you are willing to use a library for this, jquery-ui-map can help you a lot. It supports creating Google Maps markers from JSON, HTML, etc. I've just worked with it on a project and it helped me a lot.
加载中,请稍侯......
精彩评论