Skip to content

Instantly share code, notes, and snippets.

@Yosuke-Kawakami

Yosuke-Kawakami/Google-Maps-Sample-HeatMap.html

Created February 6, 2017 05:05
Show Gist options
  • Save Yosuke-Kawakami/77039d423e66f9622b7354fe83d6df1f to your computer and use it in GitHub Desktop.
Save Yosuke-Kawakami/77039d423e66f9622b7354fe83d6df1f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Google-Maps-Sample-HeatMap.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization"></script>
<script type="text/javascript">
var MAX_SIZE = 21;
var MIN_SIZE = 15;
var DEFAULT_SIZE = 19;
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,
};
map = new google.maps.Map(document.getElementById("map_canvas"), option);
var heatMapArrays = [
new google.maps.LatLng(35.684168, 139.756599),
new google.maps.LatLng(35.693113, 139.749334),
new google.maps.LatLng(35.693086, 139.749299),
new google.maps.LatLng(35.693113, 139.749275),
new google.maps.LatLng(35.693136, 139.749268),
new google.maps.LatLng(35.693187, 139.749225),
new google.maps.LatLng(35.693217, 139.749199),
new google.maps.LatLng(35.693242, 139.749180),
new google.maps.LatLng(35.693255, 139.749191),
new google.maps.LatLng(35.693280, 139.749175),
new google.maps.LatLng(35.693291, 139.749172),
new google.maps.LatLng(35.693106, 139.749328),
new google.maps.LatLng(35.693096, 139.749325),
new google.maps.LatLng(35.693108, 139.749316),
new google.maps.LatLng(35.693115, 139.749303),
new google.maps.LatLng(35.693106, 139.749314),
new google.maps.LatLng(35.693102, 139.749332),
new google.maps.LatLng(35.693115, 139.749320),
new google.maps.LatLng(35.693102, 139.749295),
];
var heatMap = new google.maps.visualization.HeatmapLayer(
{
data : heatMapArrays
}
);
heatMap.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<section id="map_canvas" />
</body>
<script type="text/javascript">
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment