Jump to content

google maps javascript problem

ldoozer

By ldoozer
in Javascript Help

Recommended Posts

ldoozer Regular Member

ldoozer

Posted
Posted

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>

Link to comment
https://forums.phpfreaks.com/topic/51374-google-maps-javascript-problem/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.