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

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

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

参考

Google Maps APIを使って複数のマーカーと吹き出しを設置してみる ｜ Tips Note by TAM

TAM のテクニカルチームがお届けする WEB技術ブログ！

www.tam-tam.co.jp

GoogleMapの埋め込みと、デザインやアイコンの変更などをカスタマイズする方法 | 株式会社LIG

GoogleMapを表示させる方法から、マップのデザインを変える方法、アイコンの配置方法もまとめました。調整がうまくいかない方はサンプルコードを配布しているサイトもあるので、そちらを参考にするのもおすすめです。

liginc.co.jp