GoogleMapで吹き出しを表示する

2018年9月6日2019年1月20日

マーカーをクリックしたときに吹き出し（情報ウィンドウ）を表示する方法

サンプルコード

var tokyo = {lat:35.681167, lng:139.767052};
// マップのインスタンス作成
var map = new google.maps.Map(document.getElementById('map'),{
  center: tokyo, // 地図位置を東京に指定
  zoom: 15 // 地図のズームを指定
});

// マーカーのインスタンス作成
var marker = new google.maps.Marker({
  position: tokyo,
  map: map,
  title: "東京"
});

// ココから追加
// 情報ウィンドウのインスタンス作成
var infowindow = new google.maps.InfoWindow();
marker.addListener('click', function() {
　　// 情報ウィンドウに表示する内容
　　infowindow.setContent("tokyo");
　　// 情報ウィンドウを開く（マーカーに紐づけ）
　　infowindow.open(map, marker);
});

参考

Google Maps Platform InfowWindow