Notice: Trying to access array offset on value of type bool in /home/himariweb/www/wp/wp-content/themes/luxeritas/inc/json-ld.php on line 114

GoogleMapで吹き出しを表示する

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

Google, GoogleMap

Posted by himari