前回、カスタマイズした地図を表示しましたが、今回はマーカー表示にチャレンジします。
CSSの記述(前回から変更なし)
カスタムCSSに下記コードを記述します。
”mapSample”地図が表示されます。
#mapSample{
width: auto;
height: 400px;
}
HTMLの記述
ブロックの挿入
「フォーマット」-「カスタムHTML」を挿入します。 HTMLに下記コード記述します。
地図の配置(前回から変更なし)
<div id="mapSample"></div>
関数の配置
今回地図のカスタマイズ情報[Style]設定なしで作成します。
<div id="mapSample"></div>
<script>
var map;
var marker;
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
});
}
</script>
MAP API呼び出しコードの記述
<script src="https://maps.googleapis.com/maps/api/js?key=実際のキーを記述;callback=initMap"></script>
地図にマーカーを表示したMAP

コメント