markerclustererplus
Version:
## Warning!
136 lines (113 loc) • 2.93 kB
HTML
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>MarkerClustererPlus V3 Example</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Arial;
font-size: 14px;
}
#panel {
float: left;
width: 300px;
height: 550px;
}
#map-container {
margin-left: 300px;
}
#map {
width: 100%;
height: 550px;
}
#markerlist {
height: 400px;
margin: 10px 5px 0 10px;
overflow: auto;
}
.title {
border-bottom: 1px solid #e0ecff;
overflow: hidden;
width: 256px;
cursor: pointer;
padding: 2px 0;
display: block;
color: #000;
text-decoration: none;
}
.title:visited {
color: #000;
}
.title:hover {
background: #e0ecff;
}
#timetaken {
color: #f00;
}
.info {
width: 200px;
}
.info img {
border: 0;
}
.info-body {
width: 200px;
height: 200px;
line-height: 200px;
margin: 2px 0;
text-align: center;
overflow: hidden;
}
.info-img {
height: 220px;
width: 200px;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<script src="../src/data.json" type="text/javascript"></script>
<script type="text/javascript">
var script = '<script type="text/javascript" src="../src/markerclusterer';
if (document.location.search.indexOf('packed') !== -1) {
script += '_packed';
}
script += '.js"><' + '/script>';
document.write(script);
</script>
<script type="text/javascript" src="speed_test.js"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', speedTest.init);
</script>
</head>
<body>
<div id="panel">
<h3>An example of MarkerClustererPlus</h3>
<p>
<a href="?packed">Packed</a> |
<a href="?">Standard</a> version of the script.
</p>
<div>
<input type="checkbox" checked="checked" id="usegmm"/>
<span>Use MarkerClusterer</span>
</div>
<div>
Markers:
<select id="nummarkers">
<option value="10">10</option>
<option value="50">50</option>
<option value="100" selected="selected">100</option>
<option value="500">500</option>
<option value="1000">1000</option>
</select>
<span>Time used: <span id="timetaken"></span> ms</span>
</div>
<strong>Marker List</strong>
<div id="markerlist">
</div>
</div>
<div id="map-container">
<div id="map"></div>
</div>
</body>
</html>