Google Maps Sidebar
I have been using Open infoWindow of specific marker from outside Google Maps (V3) to try and implement a sidebar into one of my map pages. I've put together the following code (see below) but I'm getting an error when I try and open the page. The error is 'document.getElementById(...)' is null or not an object' and it is pointing to this line :
document.getElementById("locationslist").innerHTML = locationslist;
I've been looking at this now for quite some time and I just can't see what the error is.
<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>All Locations</title>
<link rel="stylesheet" href="css/alllocationsstyle.css" type="text/css" media="all" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
<div id="map"></div>
<div id="locationslist"></div>
<body onload="showLocations()">
<script type="text/javascript">
var map;
var gmarkers = new Array();
var locationslist;
function showLocations() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(54.312195845815246,-4.45948481875007),
zoom:6,
mapTypeId: 'terrain'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("phpfile.php", function(data) {
var xml = data.responseXML;
gmarkers = xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < gmarkers.length; i++) {
var locationname = gmarkers[i].getAttribute("locationname");
var address = gmarkers[i].getAttribute("address");
var locationid = gmarkers[i].getAttribute("locationid");
var point = new google.maps.LatLng(
parseFloat(gmarkers[i].getAttribute("osgb36lat")),
parseFloat(gmarkers[i].getAttribute("osgb36lon")));
var html = "<b>" + locationname + "</b> <br/>" + address;
bounds.extend(point);
var marker = new google.maps.Marker({
map: map,
position: point,
locationid: locationid
});
bindInfoWindow(marker, map, infoWindow, html);
locationslist += "<div onclick=scrollToMarker(" + i + ")>"+locationname+"</div>";
}
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
//display company data in html
document.getElementById("locationslist").innerHTML = locationslist;
});
}
function scrollToMarker(index) {
map.panTo(gmarkers[index].getPosition());
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
r开发者_运维百科equest.open('GET', url, true);
request.send(null);
}
function doNothing(){
}
</script>
</head>
</body>
</html>
The problem is that gmarkers is just a bunch of XML data, and there are no functions (like getPosition()) defined on it.
The map.panTo() method takes one parameter (source), that is of the type LatLng. So you need to make an instance of the google.maps.LatLng class first. You already do this in the main function, so copy it here too:
function scrollToMarker(index) {
var point = new google.maps.LatLng(
parseFloat(gmarkers[index].getAttribute("osgb36lat")),
parseFloat(gmarkers[index].getAttribute("osgb36lon"))
);
map.panTo(point);
}
加载中,请稍侯......
精彩评论