なんらかの理由でマップが表示されません....その理由が本当にわかりません。
以下はコードです。何らかの理由でマップが表示されません... Google Maps API v3 API を使用してヒートマップを作成するのはこれが初めてなので、少し迷っています。
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<title>Heatmap</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization"></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map { height: 200px; width: 100% }
</style>
</head>
<body onload="initialize()" style="height: 100%;>
<div id="map" style="height: 600px; width: 800px;"></div>
<script>
var map, pointarray, heatmap;
var callsForService = [
new google.maps.LatLng(42.2861624, -85.5813606),
new google.maps.LatLng(42.3033738, -85.583591),
new google.maps.LatLng(42.2453713, -85.584707),
new google.maps.LatLng(42.3034079, -85.5973274),
new google.maps.LatLng(42.249651, -85.595145),
new google.maps.LatLng(42.2897601, -85.5858846),
new google.maps.LatLng(42.321433, -85.551406),
new google.maps.LatLng(42.2848497, -85.5906321),
new google.maps.LatLng(42.2916942, -85.5818942),
new google.maps.LatLng(42.3033738, -85.583591),
new google.maps.LatLng(42.3061913, -85.5962831),
new google.maps.LatLng(42.321433, -85.551406),
new google.maps.LatLng(42.2917069, -85.5872286),
];
function initialize() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(42.2800153,-85.5828371),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'),
mapOptions);
pointArray = new google.maps.MVCArray(callsForService);
heatmap = new google.maps.visualization.HeatmapLayer({
data: pointArray
});
heatmap.setMap(map);
}
</script>
</body>
</html>`