前回マーカー表示にチャレンジしましたが、今回は吹き出し表示にチャレンジします。
CSSの記述（前回から変更なし）
カスタムCSSに下記コードを記述します。
”mapSample”地図が表示されます。
#mapSample{
width: auto;
height: 400px;
}HTMLの記述
地図の配置（前回から変更なし）
<div id="mapSample"></div>関数の配置
今回地図のカスタマイズ情報[Style]設定なしで作成します。
<script>
var map;
var marker;
var infoWindow;
var center = {
lat: 35.570231, // 緯度
lng: 135.191836 // 経度
};
function initMap() {
map = new google.maps.Map(document.getElementById('mapSample'), {
center: center, // 地図の中心を指定
zoom: 14// 地図のズームを指定
});
const image = 'faitjit-Logo.png';
marker = new google.maps.Marker({ // マーカーの追加
position: center, // マーカーを立てる位置を指定
map: map // マーカーを立てる地図を指定
icon: image
});
infoWindow = new google.maps.InfoWindow({ // 吹き出しの追加
content: '<div class="mapSample">故郷</div>' // 吹き出しに表示する内容
});
marker.addListener('click', function() { // マーカーをクリックしたとき
infoWindow.open(map, marker); // 吹き出しの表示
});
}
</script>MAP API呼び出しコードの記述
<script src="https://maps.googleapis.com/maps/api/js?key=実際のキーを記述;callback=initMap"></script>地図にマーカーを吹き出し表示したしたMAP
マーカーをクリックすると吹き出しが表示されます。
コメント