企業サイトの場合、本社と支社。グルメサイトなら表示中の地図に存在するカフェ。現在地から一番近いガソリンスタンド。
地図上にたくさんのマーカー、クリックしたらその店名や住所を吹き出し形式で。
ものすごく基本的にやりたいことなのに、なぜか、なぜか、公式ドキュメント にそのサンプルが無いのです！
由々しき問題です。なので、サンプルを公開します。
<div id="map-canvas" class="map-canvas"></div>
<script type="text/javascript">
var map;
var currentInfoWindow = null;
var data = [
{ lat: 35.705833, lng: 139.751944, team: "読売ジャイアンツ" },
{ lat: 35.674556, lng: 139.717083, team: "東京ヤクルトスワローズ" },
{ lat: 35.443383, lng: 139.640028, team: "横浜DeNAベイスターズ" },
{ lat: 35.185972, lng: 136.947467, team: "中日ドラゴンズ" },
{ lat: 34.721231, lng: 135.361642, team: "阪神タイガース" },
{ lat: 34.391878, lng: 132.484731, team: "広島東洋カープ" },
{ lat: 43.015192, lng: 141.409686, team: "北海道日本ハムファイターズ" },
{ lat: 38.256136, lng: 140.902567, team: "東北楽天ゴールデンイーグルス" },
{ lat: 35.768617, lng: 139.420464, team: "埼玉西武ライオンズ" },
{ lat: 35.645117, lng: 140.030847, team: "千葉ロッテマリーンズ" },
{ lat: 34.669403, lng: 135.476214, team: "オリックス・バファローズ" },
{ lat: 33.595383, lng: 130.362175, team: "福岡ソフトバンクホークス" }
];
function initMap() {
map = new google.maps.Map(document.getElementById("map-canvas"), {
zoom: 5,
center: {lat: 39.725341641807056, lng: 137.85576856249997},
});
data.forEach(function(d) {
var infoWindow = new google.maps.InfoWindow({
content: '<div style="text-align:center">' + d.team + '</div>',
});
var marker = new google.maps.Marker({
map: map,
position: {lat: d.lat, lng: d.lng},
});
marker.addListener("click", function() {
if (currentInfoWindow){
currentInfoWindow.close();
}
infoWindow.open(map, marker);
currentInfoWindow = infoWindow;
});
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDjsHQdiN9T0LeJHfrP67Y1QKLiq3SjLno&callback=initMap">
</script>