ライブラリ付きでGoogle Mapsを読み込む

ヒートマップレイヤを使うにはGoogle Mapsをライブラリ付きで読み込む必要がある。Google Maps JavaScript APIを呼び出す際に libraries=visualization を付与して呼び出すことで、 google.maps.visualization オブジェクトが使用できるようになる。

<script type="text/javascript"
        src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization">
</script>

<body>
  <div id="map-canvas"></div>
</body>

ヒートマップレイヤを使用する

google.maps.visualization.HeatmapLayer オブジェクトを google.map.Map インスタンスにオーバーレイする。

ヒートマップ描画に使用するオブジェクトはgoogle.maps.LatLngオブジェクトおよびJavaScriptオブジェクトのいずれかで、後者はlocation属性にgoogle.maps.LatLngオブジェクトを内包しておりweight属性にヒートマップの重みを持っている（サーバサイドで計算して出力することを想定していると思われる）。

// データの準備
var heatmapData = [
  new google.maps.LatLng(35.685175, 139.752799),
  {location: new google.maps.LatLng(35.65858, 139.745433), weight: 8},
  {location: new google.maps.LatLng(35.710063, 139.8107), weight: 5}
];

// Mapオブジェクトの初期化
var map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(35.658, 139.745),
    zoom: 11
});

// ヒートマップレイヤの初期化
var heatmap = new google.maps.visualization.HeatmapLayer({data: heatmapData});

// ヒートマップをmapインスタンスに紐付け
heatmap.setMap(map);

Google Maps Heatmapレイヤを使う

ライブラリ付きでGoogle Mapsを読み込む

ヒートマップレイヤを使用する

参考