Google Maps (Clusters)
HTML
<script src="https://www.google.com/maps/d/embed?mid=1HEwALojLW9GGId1tTWypV_f0OLk"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/src/data.json" type="text/javascript"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/src/markerclusterer.js"></script>
<script type="text/javascript">
var script = '<script type="text/javascript" src="../src/markerclusterer';
if (document.location.search.indexOf('packed') !== -1) {
script += '_packed';
}
if (document.location.search.indexOf('compiled') !== -1) {
script += '_compiled';
}
script += '.js"><' + '/script>';
document.write(script);
</script>
<script type="text/javascript">
google.load('maps', '3', {
other_params: 'sensor=false'
});
google.setOnLoadCallback(initialize);
var styles = [[{
url: '../images/people35.png',
height: 35,
width: 35,
opt_anchor: [16, 0],
opt_textColor: '#ff00ff',
opt_textSize: 10
}, {
url: '../images/people45.png',
height: 45,
width: 45,
opt_anchor: [24, 0],
opt_textColor: '#ff0000',
opt_textSize: 11
}, {
url: '../images/people55.png',
height: 55,
width: 55,
opt_anchor: [32, 0],
opt_textSize: 12
}], [{
url: '../images/conv30.png',
height: 27,
width: 30,
anchor: [3, 0],
textColor: '#ff00ff',
opt_textSize: 10
}, {
url: '../images/conv40.png',
height: 36,
width: 40,
opt_anchor: [6, 0],
opt_textColor: '#ff0000',
opt_textSize: 11
}, {
url: '../images/conv50.png',
width: 50,
height: 45,
opt_anchor: [8, 0],
opt_textSize: 12
}], [{
url: '../images/heart30.png',
...
CSS
body {
margin: 0;
padding: 10px 20px 20px;
font-family: Arial;
font-size: 16px;
}
#map-container {
padding: 6px;
border-width: 1px;
border-style: solid;
border-color: #ccc #ccc #999 #ccc;
-webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
-moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
width: 600px;
}
#map {
width: 600px;
height: 400px;
}
#actions {
list-style: none;
padding: 0;
}
#inline-actions {
padding-top: 10px;
}
.item {
margin-left: 20px;
}