Yosuke-Kawakami · February 6, 2017 05:06
diff --git a/Google-Maps-Sample-MapCluster.html b/Google-Maps-Sample-MapCluster.html
 <!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>
	<!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>