CODEWITHSUNDEEP
javascriptgoogle-maps-api-3
dannail
dannail

Reputation: 455

Javascript webpage expect to at least load a map, but actually can't load anything

Below is that html page embedded with Javascript. The Map API Key is valid for my web domain, and the page can load the map only if I hide all the Javascript functions and left the initialize() there, just like some Google's official example code,
Otherwise I see nothing after the page is loaded(i.e. blank page).
Can someone help me find the reason why?

Thanks!

<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&amp;v=2&amp;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>

Upvotes: 1

Views: 81

Answers (1)

Jivings
Jivings

Reputation: 23262

There was a bug in your JavaScript. The createXMLHttpRequest should be like this:

function createXMLHttpRequest(){
   if(window.ActiveXObject)
   {
       return new ActiveXObject("Microsoft.XMLHTTP");
   }

   else if(window.XMLHttpRequest)
   {
       return new XMLHttpRequest();
   }
}

Note you had written:

return = new XMLHttpRequest();

Upvotes: 2

Related Questions