ライブラリ付きで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);