Right, I'm in the process of creating a web app using Google Maps. What the following code should do is retrieve some xml code from a page, then load it on to the map, using the geocoder to get lat/long values from the address. Most of it's just Google code I've mauled about with. But it wont load, my JavaScript knowledge is not excellent, and Firebug doesn't seem to help. Basically the page will not load at all.
Thank you in advance guys.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps AJAX + mySQL/PHP Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=blahblah"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var id = null;
var adress = null;
var image = null;
var point = null;
var pointer = null;
var iconBlue = new GIcon();
iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconBlue.iconSize = new GSize(12, 20);
iconBlue.shadowSize = new GSize(22, 20);
iconBlue.iconAnchor = new GPoint(6, 20);
iconBlue.infoWindowAnchor = new GPoint(5, 1);
var iconRed = new GIcon();
iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconRed.iconSize = new GSize(12, 20);
iconRed.shadowSize = new GSize(22, 20);
iconRed.iconAnchor = new GPoint(6, 20);
iconRed.infoWindowAnchor = new GPoint(5, 1);
var customIcons = [];
customIcons["restaurant"] = iconBlue;
customIcons["bar"] = iconRed;
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(52.2725, -0.8825), 12);
geocoder = new GClientGeocoder();
GDownloadUrl("phpsqlajax_genxml3.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
id = markers[i].getAttribute("ID");
address = markers[i].getAttribute("ADDRESS");
image = markers[i].getAttribute("IMAGE");
var point3 = showAddress(address);
var marker = createMarker(pointer, id, address, image);
map.addOverlay(marker);
}
});
}
}
function showAddress(address) {
point = geocoder.getLatLng(address,function(point) {
if (!point) {
alert(address + " not found");
}
else
{
pointer = new GLatLng(point);
return pointer;
}
}
});
function createMarker(pointer, id, address, image) {
var marker = new GMarker(pointer);
var html = "<b>" + ID + "</b> <br/>" + ADDRESS + "</b> <br/>" + IMAGE;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>Thank you in advance guys.
I'll take a look and report back. 