Created
February 6, 2017 05:06
-
-
Save Yosuke-Kawakami/aba4a56d5f3f2c02da7e692b6d799af7 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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