Skip to content

Instantly share code, notes, and snippets.

@Yosuke-Kawakami
Created February 6, 2017 05:06
Show Gist options
  • Save Yosuke-Kawakami/aba4a56d5f3f2c02da7e692b6d799af7 to your computer and use it in GitHub Desktop.
Save Yosuke-Kawakami/aba4a56d5f3f2c02da7e692b6d799af7 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style>
html, body
{
height : 100%;
padding : 0em;
margin : 0em;
}
#map_canvas
{
height: 100%;
}
</style>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization&callback=initialize"></script>
<script>
var MAX_SIZE = 22;
var MIN_SIZE = 15;
var DEFAULT_SIZE = 19;
var locations = [
{lat:35.684168, lng: 139.756599},
{lat:35.693113, lng: 139.749334},
{lat:35.693086, lng: 139.749299},
{lat:35.693113, lng: 139.749275},
{lat:35.693136, lng: 139.749268},
{lat:35.693187, lng: 139.749225},
{lat:35.693217, lng: 139.749199},
{lat:35.693242, lng: 139.749180},
{lat:35.693255, lng: 139.749191},
{lat:35.693280, lng: 139.749175},
{lat:35.693291, lng: 139.749172},
{lat:35.693106, lng: 139.749328},
{lat:35.693096, lng: 139.749325},
{lat:35.693108, lng: 139.749316},
{lat:35.693115, lng: 139.749303},
{lat:35.693106, lng: 139.749314},
{lat:35.693102, lng: 139.749332},
{lat:35.693115, lng: 139.749320},
{lat:35.693102, lng: 139.749295},
]
function initialize()
{
var Gate = new google.maps.LatLng(35.693129, 139.749369);
var option =
{
center : Gate,
zoom : DEFAULT_SIZE,
mapTypeId : google.maps.MapTypeId.ROADMAP,
maxZoom : MAX_SIZE,
minZoom : MIN_SIZE,
mapTypeControl : false,
streetViewControl : false,
};
var map = new google.maps.Map(document.getElementById('map_canvas'),option);
var labels = 'いろはにほへとりりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす';
var markers = locations.map(
function(location, i)
{
return new google.maps.Marker({
position: location,
label : labels[i % labels.length]
});
}
);
var url = "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m";
var markerCluster = new MarkerClusterer(map, markers, {imagePath: url});
}
</script>
</head>
<body onload="initialize();">
<div id="map_canvas"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment