Googleマップをカスタマイズする方法。(マーカー表示編)

googlemap

前回、カスタマイズした地図を表示しましたが、今回はマーカー表示にチャレンジします。

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

実際に張り付けたMAP

参考

コメント