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

URL: https://webrandum.net/google-maps-api-marker/
公開日: 2021-01-28
更新日: 2021-01-28
カテゴリー: コーディング
タグ: Google Maps API
出典: Webrandum（著者: サイトウ マサカズ）

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

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

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

## Google Maps APIの設定

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

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2020/11/eyecatch-7.jpg)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つのサービスになりました。そして料金形...](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`を使って、オプションとして下記の情報を設定します。

| オプション名 | 内容 |
| --- | --- |

| map | 反映するGoogle Maps（new google.maps.Map）を指定 |
| --- | --- |

| position | ピンを設置するポジション（new google.maps.LatLng）を指定 |
| --- | --- |

| icon | ピンの設定をオブジェクト形式で、アイコンURLやサイズを指定 |
| --- | --- |

#### icon のプロパティ

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

| プロパティ名 | 内容 |
| --- | --- |

| url | アイコンのURLパスを指定 |
| --- | --- |

| size | アイコンの表示する部分のサイズ（new google.maps.Size）を指定 |
| --- | --- |

| scaleSize | 画像の表示サイズを指定 |
| --- | --- |

| anchor | 画像の支点を指定 |
| --- | --- |

| labelOrigin | ラベルを付ける場合のラベルの支点を指定 |
| --- | --- |

| origin | anchorやsizeの支点を指定 |
| --- | --- |

## 実際のコード

### ピンを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']
    }
  })
}
```