嗨我正在谷歌地图api工作过去15天以后。我正在尝试以缩放模式显示谷歌地图并显示信息框，当你点击表行但它不工作它是给错误可以任何人帮助我。 代码将是这样的
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ page import="com.preva.vo.DeviceList"%>
<%@ page import="com.preva.vo.UserListDetails"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Preva Tracking Systems</title>
<link rel="icon" href="pictures/preva_logo.png" />
<link href="css/sty.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/screen.css" type="text/css">
<link rel="stylesheet" href="css/site.css" type="text/css">
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false">
</script>
<script type="text/javascript"
src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.12/src/markerclusterer_packed.js" >
</script>
<style>
.topclass{
background-color: rgb(212, 224, 238);
width:100%;
height:85%;
border:5;
}
#content{
width:100%;
font-family:Arial,Helvetica,sans-serif;
}</style>
<script type="text/javascript">
function initialize() {
var markers = [{
"title": 'Bombay Hospital',
"latitude": '18.9409388',
"longitude": '72.82819189999998',
"location": 'Bombay Hospital',
"deviceID": 'A123',
"date": '30-Dec-2013 03:05:53 PM',
"description": 'sam',
"speed": '30',
"status": 'In Motion'
}, {
"title": 'Jaslok Hospital',
"latitude": '18.9716956',
"longitude": '72.80991180000001',
"deviceID": 'A121',
"date": '30-Dec-2013 03:05:53 PM',
"description": 'sam1',
"location": 'Jaslok Hospital',
"speed": '40',
"status": 'In Motion'
}, {
"title": 'Lilavati Hospital',
"latitude": '19.0509488',
"longitude": '72.8285644',
"deviceID": 'A122',
"date": '30-Dec-2013 03:05:53 PM',
"description": 'sam2',
"location": 'Lilavati Hospital',
"speed": '20',
"status": 'In Motion'
}, {
"title": 'Aksa Beach',
"latitude": '19.1759668',
"longitude": '72.79504659999998',
"deviceID": 'A124',
"description": 'sam3',
"date": '30-Dec-2013 03:05:53 PM',
"location": 'Aksa Beach',
"speed": '0',
"status": 'In Stop'
}, {
"title": 'Juhu Beach',
"latitude": '19.0883595',
"longitude": '72.82652380000002',
"deviceID": 'A12316',
"date": '30-Dec-2013 03:05:53 PM',
"description": 'sam16',
"location": 'Juhu Beach',
"speed": '0',
"status": 'In Stop'
}, {
"title": 'Girgaum Beach',
"latitude": '18.9542149',
"longitude": '72.81203529999993',
"deviceID": 'A12315',
"description": 'sam15',
"location": 'Girgaum Beach',
"speed": '0',
"status": 'In Stop'
}, {
"title": 'Oberoi Mall',
"latitude": '19.1737704',
"longitude": '72.86062400000003',
"deviceID": 'A12314',
"date": '30-Dec-2013 03:05:53 PM',
"description": 'sam14',
"location": 'Oberoi Mall',
"speed": '0',
"status": 'Idle'
}, {
"title": 'Infinity Mall',
"latitude": '19.1846511',
"longitude": '72.83454899999992',
"deviceID": 'A12313',
"date": '30-Dec-2013 03:05:53 PM',
"description": 'sam13',
"location": 'Infinity Mall',
"speed": '0',
"status": 'Idle'
}, {
"title": 'Phoenix Mall',
"latitude": '19.0759837',
"longitude": '72.87765590000003',
"deviceID": 'A1211',
"date": '30-Dec-2013 03:05:53 PM',
"description": 'sam11',
"location": 'Phoenix Mall',
"speed": '0',
"status": 'Idle'
}, {
"title": 'Phoenix Mall',
"latitude": '19.0759837',
"longitude": '72.87765590000003',
"deviceID": 'A125',
"date": '30-Dec-2013 03:05:53 PM',
"description": 'sam5',
"location": 'Phoenix Mall',
"speed": '0',
"status": 'Idle'
}, {
"title": 'Hanging Garden',
"latitude": '18.9560279',
"longitude": '72.80538039999999',
"deviceID": 'A126',
"date": '30-Dec-2013 03:05:53 PM',
"description": 'sam6',
"location": 'Hanging Garden',
"speed": '30',
"status": 'In Motion'
}, {
"title": 'Jijamata Udyan',
"latitude": '18.979006',
"longitude": '72.83388300000001',
"deviceID": 'A127',
"date": '30-Dec-2013 03:05:53 PM',
"description": 'sam7',
"location": 'Jijamata Udyan',
"speed": '60',
"status": 'In Motion'
}, {
"title": 'Juhu Garden',
"latitude": '19.0839704',
"deviceID": 'A128',
"date": '30-Dec-2013 03:05:53 PM',
"description": 'sam8',
"longitude": '72.83388300000001',
"location": 'Juhu Garden',
"speed": '0',
"status": 'In Stop'
}, {
"title": 'Sanjay Gandhi National Park',
"deviceID": 'A129',
"description": 'sam9',
"date": '30-Dec-2013 03:05:53 PM',
"latitude": '19.2147067',
"longitude": '72.91062020000004',
"location": 'Sanjay Gandhi National Park',
"speed": '90',
"status": 'In Motion'
}]
var mapOptions = {
center: new google.maps.LatLng(23.44, 78.79),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var arraymarkers = [];
var arraymarkerss = [];
var bounds = new google.maps.LatLngBounds();
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
for (var i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.latitude, data.longitude);
var vid = data.deviceID;
var title = data.deviceID;
var icon = "";
switch (data.status) {
case "In Motion":
icon = "green";
break;
case "In Stop":
icon = "red";
break;
case "Idle":
icon = "pink";
break;
}
icon = "http://maps.google.com/mapfiles/ms/icons/" + icon + ".png";
var marker = createMarker(vid);
bounds.extend(myLatlng);
map.fitBounds(bounds);
};
function createMarker() {
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: title,
icon: new google.maps.MarkerImage(icon)
});
(function (marker, data) {
google.maps.event.addListener(marker, 'click', function (e) {
var infowindow = new google.maps.InfoWindow({});
infowindow.setContent('<div id="content">' +
'<b>Device Description: </b>' + data.description + '<br> ' +
'<b>Date\Time: </b>' + data.date + '<br> ' +
'<b>Speed: </b>' + data.speed + '<br> ' +
'<b>Status : </b>' + data.status + '<br> ' +
'<b>LastLocation: </b>' + data.location + '<br> ' + '</div>'
);
infowindow.open(map, marker);
});
})(marker, data);
arraymarkers[vid] = marker;
arraymarkerss.push(marker);
};
var mcOptions = {
gridSize: 30,
maxZoom: 15
};
var markerCluster = new MarkerClusterer(map, arraymarkerss, mcOptions);
function centerMap(vId) {
$$('tr').each(function (data) {
if (!data.identify().include('anonymous_element')) {
data.setStyle({
backgroundColor: (data.identify().include(vId) ? '#FDC7AD' : '')
});
}
});
setCenter(vId);
displayAI(vId);
}
function setCenter(vId) {
infowindow.close();
if (!Object.isUndefined(map) && map != null) {
if (vId.startsWith('ALL_')) {
setCenterAndZoom(new google.maps.LatLng(22.674847, 77.958984), 5);
} else {
setCenterAndZoom(arraymarkers[vId].getPosition(), 19);
google.maps.event.trigger(arraymarkers[vId], 'click');
}
}
}
function setCenterAndZoom(point, zoom) {
map.setCenter(point);
map.setZoom(zoom);
}
function displayAI(value) {
$$('tr[id*=AI_]').each(function (node) {
node.setStyle({
display: node.identify() == 'AI_' + value ? '' : 'none'
});
});
}
marr = {};
var html = '<table cellpadding="0" cellspacing="0">';
html += '<tr id="ALL_V" onclick="centerMap(\'ALL_V\')"><td></td><td style="cursor: pointer;" title="View all vehicles on map">All</td></tr>';
for (var i = 0; i < markers.length; i++) {
marr['V_' + markers[i].deviceID] = markers[i];
html += '<tr id="V_' + markers[i].deviceID + '" onclick="centerMap(\'V_' + markers[i].deviceID + '\')" style="cursor: pointer;" title="View additional information & location on map">';
html += '<td><img src="Images/' + markers[i].status + '.png" title="Speed = ' + markers[i].speed + ' kmph"></td>';
html += '<td>' + markers[i].description + '</td>';
html += '</tr>';
html += '<tr id="AI_V_' + markers[i].deviceID + '" style="display: none;">';
html += '<td></td>';
html += '<td><table width="100%" cellpadding="0" cellspacing="0">';
html += '<tr id="anonymous_element"><td>' + markers[i].date + '</td></tr>';
html += '<tr id="anonymous_element"><td>' + markers[i].status + '</td></tr>';
html += '<tr id="anonymous_element"><td>' + markers[i].location + '</td></tr>';
html += '<tr id="anonymous_element"><td align="right"><img src="./Images/close.gif" title="Close" onclick="centerMap(\'ALL_V\')" style="cursor: pointer;"></td></tr>';
html += '</table></td>';
html += '</tr>';
}
html += '</table>';
document.getElementById('VViewDiv').innerHTML = html;
}
</script>
</head>
<body onload="initialize()">
<table class="topclass">
<tr>
<td width="10%">
<div style="width:200px; height:500px; overflow:scroll;display:block;" id="VViewDiv">
</div>
</td>
<td width="90%">
<form id="form1">
<div id="map_canvas" style="width: 100%; height: 80%; position: absolute; right: 0px;">
</div>
</form>
</td>
</tr>
</table>
<br>
</br>
</body>
</html>