js-marker-clusterer
Version:
The library creates and manages per-zoom-level clusters for large amounts of markers. Google API v3.
134 lines (123 loc) • 3.24 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>MarkerClusterer v3 Speed Test Example</title>
<style>
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="https://maps.googleapis.com/maps/api/js"></script>
<script src="data.json"></script>
<script>
var script = '<script type="text/javascript" src="../src/markerclusterer';
if (document.location.search.indexOf('compiled') !== -1) {
script += '_compiled';
}
script += '.js"><' + '/script>';
document.write(script);
</script>
<script src="speed_test.js"></script>
<script>
google.maps.event.addDomListener(window, 'load', speedTest.init);
</script>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-12846745-20']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' === document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="panel">
<h3>An example of MarkerClusterer v3</h3>
<p>
<a href="?compiled">Compiled</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>