Google Maps APIでピンの見た目をカスタマイズする方法

Google Maps APIを使う1番のメリット（理由）はオリジナルのピンを設置できることです。

「オリジナルのピンを設定する方法を調べてみたらGoogle Maps APIっていうのを使わないといけないらしい」となって使う人も多いのでは無いでしょうか？

今回はそんなオリジナルのピンの設定方法についてまとめておきます。

Google Maps APIの設定

Google Maps APIの初期設定については過去に記事にしてあるのでそちらをご覧ください。

Webrandum

Google Maps APIを使ってGoogle Mapsをウェブサイトに表示させる方法

https://webrandum.net/google-maps-api

まずは下記の基本のコードでGoogle Maps APIでマップを表示させます。

<div id="map"></div>
<script>
initMap();
function initMap() {
  let map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: - 35.681382, lng: 139.766083},
    zoom: 8
  });
}
</script>

ピンの追加

ピンの追加の仕組み

ピンを追加するときはnew google.maps.Markerを使って、オプションとして下記の情報を設定します。

icon のプロパティ

「icon」のプロパティでは、さらにアイコンの細かい情報を入力します。

実際のコード

ピンを1つ追加する

先ほど紹介したオプションを使って最低限アイコンを表示させたい場合は、下記のようなコードになります。

function initMap() {
  let map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: - 35.681382, lng: 139.766083},
    zoom: 8
  });

  //マーカーの追加
  let marker = new google.maps.Marker({
    position: {lat: - 35.681382, lng: 139.766083}, // ピンの緯度・経度
    map: map, // 追加するGoogle Mapsを指定
    icon: {
      url: './images/pin.png' // ピンの画像パスを指定
    }
  });
}

これでマーカーの追加ができます。

ピンを複数追加する

ピンを複数追加したい場合は、ピンの情報を下記のように管理して、for文でピンの追加をするようにすると管理がラクになります。

markers = [
  {
    lat: - 35.681382,
    lng: 139.766083,
    icon: './images/pin_1.png'
  },
  {
    lat: - 35.681482,
    lng: 139.766183,
    icon: './images/pin_2.png'
  },
  {
    lat: - 35.681282,
    lng: 139.766043,
    icon: './images/pin_3.png'
  },
];

for (let i = 0; i < markers.length; i++) {
  let markerPosition = new google.maps.LatLng({lat: markers[i]['lat'], lng: markers[i]['lng']})
  let marker = new google.maps.Marker({
    position: markerPosition,
    map: map,
    icon: {
      url: markers[i]['icon']
    }
  })
}