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 load() {
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.
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.