google maps javascript problem

ldoozer · May 14, 2007

hi all sorry to post all this code but can anyone tell me why i am gettting a javascript error: 'documentElement' is null or not an object when i run this:

<html>
<head>
<title>map</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAPDUET0Qt7p2VcSk6JNU1sBRRwPhutbWBmyj82Go_H6JlE7EvFBSKFFFHFePAwvib9UM0geoA3Pgafw" type="text/javascript"></script>
<link rel="stylesheet" href="styles/main.css" />
    <script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
  <body onLoad="MM_preloadImages('images/home_but_over.gif','images/view_map_but_over.gif','images/help_but_over.gif','images/links_but_over.gif','images/diffusion_data_but_over.gif','images/air_monitoring_but_over.gif','images/travel_plans_but_over.gif','images/partners_but_over.gif','images/diffusion_tubes_but_over.gif')" onUnload="GUnload()">


    <!-- you can use tables or divs for the overall layout -->

<div id="wrapper">

<div id="header">
<h1>Map</h1>
<div id="main_nav">
  <ul>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home','','images/home_but_over.gif',1)" ><img src="images/home_but_up.gif" alt="home" name="home" width="66" height="20" border="0"></a></li>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('view_map','','images/view_map_but_over.gif',1)"><img src="images/view_map_but_up.gif" alt="view map" name="view_map" width="97" height="20" border="0"></a></li>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('help','','images/help_but_over.gif',1)"><img src="images/help_but_up.gif" name="help" width="66" height="20" border="0"></a></li>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('links','','images/links_but_over.gif',1)"><img src="images/links_but_up.gif" alt="links" name="links" width="66" height="20" border="0"></a></li>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('diff_data','','images/diffusion_data_but_over.gif',1)"><img src="images/diffusion_data_but_up.gif" alt="diffusion tubes data" name="diff_data" width="154" height="20" border="0"></a></li>
      </ul>
    </div>
</div>
<div id="content">
<div id="sub_nav">
	<ul>
		<li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('a','','images/air_monitoring_but_over.gif',1)"><img src="images/air_monitoring_but_up.gif" alt="air monitoring site" name="a" width="160" height="20" border="0"></a></li>
		<li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('b','','images/travel_plans_but_over.gif',1)"><img src="images/travel_plans_but_up.gif" alt="travel plans" name="b" width="108" height="20" border="0"></a></li>
		<li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('c','','images/partners_but_over.gif',1)"><img src="images/partners_but_up.gif" alt="partners" name="c" width="87" height="20" border="0"></a></li>
		<li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('d','','images/diffusion_tubes_but_over.gif',1)"><img src="images/diffusion_tubes_but_up.gif" alt="diffusion tubes" name="d" width="126" height="20" border="0"></a></li>
	</ul>
</div>
<div id="map"></div>
<div id="side_bar"></div>
<div id="buttons">
<input type="button" value="A" onclick='readMap("air_monitoring_site.xml")'>
<input type="button" value="B" onclick='readMap("travel_plans.xml")'>
<input type="button" value="C" onclick='readMap("partners.xml")'>
</div>
<br>
    <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
      However, it seems JavaScript is either disabled or not supported by your browser. 
      To view Google Maps, enable JavaScript by changing your browser options, and then 
      try again.
    </noscript></div>
</div>


<script type="text/javascript">
//<![CDATA[

if (GBrowserIsCompatible()) {
  var side_bar_html = "";
  var gmarkers = [];
  var htmls = [];
  var i = 0;

  // A function to create the marker and set up the event window
  function createMarker(point,name,html) {
	var marker = new GMarker(point);
	GEvent.addListener(marker, "click", function() {
	  marker.openInfoWindowHtml(html);
	});
	gmarkers[i] = marker;
	htmls[i] = html;
	side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br>';
	i++;
	return marker;
  }


  // This function picks up the click and opens the corresponding info window
  function myclick(i) {
	gmarkers[i].openInfoWindowHtml(htmls[i]);
  }


  // create the map
  var map = new GMap2(document.getElementById("map"));
  map.addControl(new GLargeMapControl());
  map.addControl(new GMapTypeControl());
  map.setCenter(new GLatLng( 53.381382934432494, -1.4658164978027344), 13);

  // A function to read the data
  function readMap(url) {
	var request = GXmlHttp.create();
	request.open("GET", url, true);
	request.onreadystatechange = function() {
	  if (request.readyState == 4) {
		var xmlDoc = request.responseXML;
		// obtain the array of markers and loop through it
		var markers = xmlDoc.documentElement.getElementsByTagName("marker");

		// hide the info window, otherwise it still stays open where the removed marker used to be
		map.getInfoWindow().hide();

		map.clearOverlays();

		// empty the array
		gmarkers = [];

		// reset the side_bar
		side_bar_html="";
	  
		for (var i = 0; i < markers.length; i++) {
		  // obtain the attribues of each marker
		  var lat = parseFloat(markers[i].getAttribute("lat"));
		  var lng = parseFloat(markers[i].getAttribute("lng"));
		  var point = new GLatLng(lat,lng);
		  var html = markers[i].getAttribute("html");
		  var label = markers[i].getAttribute("label");
		  // create the marker
		  var marker = createMarker(point,label,html);
		  map.addOverlay(marker);
		}
		// put the assembled side_bar_html contents into the side_bar div
		document.getElementById("side_bar").innerHTML = side_bar_html;
	  }
	}
	request.send(null);
  }
  
  // When initially loaded, use the data from "map11a.xml"
  readMap("air_monitoring_site.xml");
  
}

else {
  alert("Sorry, the Google Maps API is not compatible with this browser");
}

//]]>
</script>

</body>

</html>

Sign In

google maps javascript problem

Recommended Posts

ldoozer

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information