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を埋め込んで、自分好みにカスタマイズしたい場合は「Google Maps API」を使う必要があります。今回はこのGoogle Maps APIの取得方法から、ウェブサイト上に表示させるところまでの流れをまとめておきます。Google Maps APIの料金プラン2018年7月16日以前は、無料版と有料版に分かれていて、最低限の機能は無料版で、それ以上のカスタマイズがしたい場合は有料版を使う必要がありました。しかし、2018年7月16日以降はそれが統合され、「Google Maps Platform」という1つのサービスになりました。そして料金形...

まずは下記の基本のコードで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']
    }
  })
}