Here is an HTML page with embedded JavaScript. The Map API Key is valid for my website domain, and the map can only load if I hide all the other JavaScript functions and keep the initialize() function as it is in Google's official example code. Otherwise, the page loads blank without displaying anything. Can anyone help me figure out why?
Thank you!
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Real-time iphone tracker</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAzcrhlFUxvQMBI3qYkY87zhStzVKTwp4tXCAZpL7xj82pGpEoixSAvciDeL2RO_S1xLoGgxKBpbG6HQ&sensor=true"
type="text/javascript"></script>
<script type="text/javascript">
var xmlobj;
function createXMLHttpRequest(){
if(window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
return = new XMLHttpRequest();
}
}
function sendRequest(){
xmlobj = createXMLHttpRequest();
if(!xmlobj){
alert('The browser is not compatible with XMLHttpRequest');
return 0;
}
var indexurl = "index.php";
xmlobj.onreadystatechange = stateHandler;
xmlobj.open("GET", indexurl, true);
xmlobj.send(null);
}
function stateHandler(){
if(xmlobj.readyState == 4 && xmlobj.status == 200){
document.getElementById("map_data").innerHTML= xmlobj.responseText;
}
}
function initialize() {
if (GBrowserIsCompatible()) {
sendRequest();
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(22.37664, 114.184902), 13);
map.setUIToDefault();
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(point));
}
}
}
</script>
</head>
<body onload="initialize()" >
<div id="map_canvas" style="width: 500px; height: 300px"></div>
<br>
<div> id="map_data" ></div>
</body>
</html>