Skip to content

Instantly share code, notes, and snippets.

@raazon

raazon/google-map-clusterer.html

Created December 3, 2019 07:46
Show Gist options
  • Save raazon/7d786fb4e2caf473f9d75574420c501b to your computer and use it in GitHub Desktop.
Save raazon/7d786fb4e2caf473f9d75574420c501b to your computer and use it in GitHub Desktop.
Download ZIP
Google map clusterer multiple marker with auto center and zoom
Raw
google-map-clusterer.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Marker Clustering</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var infoContent = '<div id="content">' +
'<a href="#" target="_blank">' +
'<img class="img-fluid" src="https://www.matthews.com/wp-content/uploads/2019/06/Advance_Auto_Parts_Roswell_NM_Matthews2.jpg" />' +
'</a>' +
'<span>Short Address</span>' +
'<a href="#" target="_blank">Property Title</a>' +
'<ul class="ic-listing-meta">' +
'<li><span class="label">Lot </span><span class="ic-meta-name">11.67 acre</span></li>' +
'<li><span class="label">Lot </span><span class="ic-meta-name">2.5 acre</span></li>' +
'</ul>' +
'</div>';
var encodeInfoContent = window.btoa(infoContent); // Encode a string in base-64
var locations = [
{
lat: 23.8697847,
lng: 90.4219536,
content: encodeInfoContent,
},
{
lat: 23.8680186,
lng: 90.4126662,
content: encodeInfoContent,
},
{
lat: -31.563910,
lng: 147.154312,
content: encodeInfoContent,
},
{
lat: -33.718234,
lng: 150.363181,
content: encodeInfoContent,
},
{
lat: -33.727111,
lng: 150.371124,
content: encodeInfoContent,
},
{
lat: -33.848588,
lng: 151.209834,
content: encodeInfoContent,
},
{
lat: -33.851702,
lng: 151.216968,
content: encodeInfoContent,
},
{
lat: -34.671264,
lng: 150.863657,
content: encodeInfoContent,
},
{
lat: -35.304724,
lng: 148.662905,
content: encodeInfoContent,
},
{
lat: -36.817685,
lng: 175.699196,
content: encodeInfoContent,
},
{
lat: -36.828611,
lng: 175.790222,
content: encodeInfoContent,
},
{
lat: -37.750000,
lng: 145.116667,
content: encodeInfoContent,
},
{
lat: -37.759859,
lng: 145.128708,
content: encodeInfoContent,
},
{
lat: -37.765015,
lng: 145.133858,
content: encodeInfoContent,
},
{
lat: -37.770104,
lng: 145.143299,
content: encodeInfoContent,
}, {
lat: -37.773700,
lng: 145.145187,
content: encodeInfoContent,
}, {
lat: -37.774785,
lng: 145.137978,
content: encodeInfoContent,
}, {
lat: -37.819616,
lng: 144.968119,
content: encodeInfoContent,
}, {
lat: -38.330766,
lng: 144.695692,
content: encodeInfoContent,
}, {
lat: -39.927193,
lng: 175.053218,
content: encodeInfoContent,
}, {
lat: -41.330162,
lng: 174.865694,
content: encodeInfoContent,
}, {
lat: -42.734358,
lng: 147.439506,
content: encodeInfoContent,
}, {
lat: -42.734358,
lng: 147.501315,
content: encodeInfoContent,
}, {
lat: -42.735258,
lng: 147.438000,
content: encodeInfoContent,
}, {
lat: -43.999792,
lng: 170.463352,
content: encodeInfoContent,
}
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: new google.maps.LatLng(23.8697847, 90.4219536),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
// Add some markers to the map.
// Note: The code uses the JavaScript Array.prototype.map() method to
// create an array of markers based on a given "locations" array.
// The map() method here has nothing to do with the Google Maps API.
var markers = new Array();
locations.map(function(location, i) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(location['lat'], location['lng']),
map: map
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(window.atob(location['content']));
infowindow.open(map, marker);
}
})(marker, i));
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
// Go through each...
markers.map(function(marker, index) {
bounds.extend(marker.position);
});
// Fit these bounds to the map
map.fitBounds(bounds);
}
</script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment