Google Maps APIを利用して表示するGoogleマップで、マーカーをクリックして情報ウィンドウを表示する動作を実装します。
html、css、Googleマップの情報ウィンドウ表示以外のjavascriptは下記の記事と同様です。
javascriptのコードです。
まず、InfoWindowクラスのオブジェクトを作成し、contentプロパティで情報ウィンドウのテキストを設定します。テキスト内でhtmlも使用できます。今回はマーカーの上に情報ウィンドウを表示するため、positionプロパティは設定していません。
次に、google.maps.event.addListenerでマーカークリック時の動作を設定します。InfoWindowクラスのopenメソッドで情報ウィンドウを開きます。
function initMap() {
var latlng = new google.maps.LatLng(35.6843218, 139.70311200000003); //中心の緯度, 経度
var map = new google.maps.Map(document.getElementById('maps'), {
zoom: 17,
center: latlng
});
var marker = new google.maps.Marker({
position: latlng, //マーカーの位置（必須）
map: map //マーカーを表示する地図
});
var infoWindow = new google.maps.InfoWindow({
content: 'NTTドコモ代々木ビル<br>通称：ドコモタワー' //情報ウィンドウのテキスト
});
google.maps.event.addListener(marker, 'click', function() { //マーカークリック時の動作
infoWindow.open(map, marker); //情報ウィンドウを開く
});
}