HTML Sidebar List
I've been able able to put some code together that creates an HTML list which details the location markers plotted in my map.
At the moment the title of the HTML list is shown as 'undefined'. I've tried changing the 'div' name and 'element' which to me seemed to be the logical place, but I was obviously wrong, because I just can't get it to change.
Then when I hover over the list items, the mouse icon shown suggests it's a text field rather than a link and no matter what I try to change I just can't get it to work.
Finally when I click on the HTML list item the map correctly pans and centres on the appropriate marker but I can't get the InfoWindow to open. I've tried what I feel are all the permuatations of the code to try resolve this but nothing works.
EDIT - CODE INSERTED
<!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>Map My Finds - All Locations</title>
<link rel="stylesheet" href="css/mylocations.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("loadmylocations.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].getAttribut开发者_运维技巧e("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) {
var point = new google.maps.LatLng(
parseFloat(gmarkers[index].getAttribute("osgb36lat")),
parseFloat(gmarkers[index].getAttribute("osgb36lon"))
);
map.panTo(point);
}
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);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing(){
}
</script>
</head>
</body>
</html>
when I hover over the list items, the mouse icon shown suggests it's a text field rather than a link
To fix this, add the following to your css
div#locationslist div{
cursor:pointer;
}
By the way, @Trott is right... this question should be split into three questions.
加载中,请稍侯......
精彩评论