WebDesigner's Memorandumウェブデザイナーの備忘録

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

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

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

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

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

Google Maps APIの設定

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']
    }
  })
}

 

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね