• 投稿日
  • 著者 staff

【Google Maps API】マーカー表示とオリジナル画像へのカスタマイズ

Google Maps API（Javascript API）について書く記事、第2弾です。
今回は「マーカー」の表示方法をご紹介します。

マーカーとは、地図上の場所を指し示すためのアイコンのことで、デフォルトでは下図のような赤いピンの形をしています。

デフォルトのマーカー画像

Google Maps APIを使って表示させた地図にも、もちろんこのようなマーカーを自由に表示できます。

さらにオリジナルの画像をマーカーとして表示させるカスタマイズも可能です！ 当サイトの会社概要ページでは、グランフェアズ専用のマーカー画像を表示させています。

会社概要ページのGoogle マップ

ということで当記事ではマーカーの表示方法について、「基礎編」とオリジナル画像への「カスタマイズ編」、2段構成にわけてお届けします。

基礎編：
マーカーを表示してみよう

まずは基本の記述内容を確認するため、デフォルトのマーカーを表示させるまでを見てみましょう。

デモ

サンプルコード全体

JSのコメントで「ここからここまで」と示した範囲が当記事の解説範囲となります。
それ以外の記述内容は前回の記事、WebサイトにGoogle マップを表示しよう！Google Maps APIの始め方の解説に準じたものになっていますので、合わせてチェックしてみてください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <style>
      #maps{ height: 400px; }
    </style>
  </head>
  <body>
  <div id="maps"></div>
  <script src="//maps.googleapis.com/maps/api/js?key={APIキー}&callback=initMap" async></script>
  <script>
    function initMap() {
      var mapPosition = {lat: 35.170662, lng: 136.923430};
      var mapArea = document.getElementById('maps');
      var mapOptions = {
        center: mapPosition,
        zoom: 16,
      };
      var map = new google.maps.Map(mapArea, mapOptions);
      // ↓↓↓ 当記事ではここから解説 ↓↓↓
      var markerOptions = {
        map: map,
        position: mapPosition,
      };
      var marker = new google.maps.Marker(markerOptions);
      // ↑↑↑ 当記事ではここまで解説 ↑↑↑
    }
  </script>
  </body>
</html>

JS

サンプルコードから、改めてJS部分を抜き出してみました。
マーカーに関する記述部分から2箇所、内容を解説していきます。

function initMap() {
  var mapPosition = {lat: 35.170662, lng: 136.923430};
  var mapArea = document.getElementById('maps');
  var mapOptions = {
    center: mapPosition,
    zoom: 16,
  };
  var map = new google.maps.Map(mapArea, mapOptions);
  //解説2：変数 markerOptions
  var markerOptions = {
    map: map,
    position: mapPosition,
  };
  //解説1：マーカーを生成するMarkerクラス
  var marker = new google.maps.Marker(markerOptions);
}

解説1：マーカーを生成するMarkerクラス

マーカーの生成を実行する記述です。引数に指定できるのはマーカーのオプションのみ。
逆に言うと、オプション指定なしではマーカーは表示されません。

var marker = new google.maps.Marker(markerOptions);

今回このオプションは、markerOptionsという変数内に指定していくことにします。

解説2：変数 markerOptions

最低限抑えておきたいオプションは下記の2つです。

  1. マーカーを生成したいマップはどれか
  2. マップ内のどこにマーカーを生成するか

1「マーカーを生成したいマップ」とは、Mapクラスで生成されたマップそのものを指します。
前回までのサンプルコードでは、Mapクラスの実行結果をmapという変数に入れていますのでこれが利用できます。

2「どこにマーカーを生成するか」は、当記事ではグランフェアズの住所（=マップの中央位置と同じ）にします。これもMapクラス用に宣言していた変数mapPositionを再利用します。

var markerOptions = {
     map: map, //変数の中身... new google.maps.Map(mapArea, mapOptions);
     position: mapPosition, //変数の中身... {lat: 35.170662, lng: 136.923430}
};

※ デモとは違い「マップの中央位置とマーカーの位置は別にしたいよ！」という場合、position値は別途指定する必要がありますので適宜変更をしてください。前回記事で座標の求め方をご紹介しています。

表示を確認して、デモのようにデフォルトの赤いマーカーが表示されればOKです！

カスタマイズ編：
マーカーをオリジナルの画像に変えてみよう

それでは続いて、マーカー画像をオリジナルのものにカスタマイズしてみましょう！
png形式で画像を準備し、任意のディレクトリに設置しておいてください。

マーカーを画像化する方法自体はとても簡単。
Markerクラスのオプションに、iconを新しく指定するだけです。値には画像の設置先のパスを入れてあげてください。

var markerOptions = {
    map: map,
    position: mapPosition,
    icon: '/assets/img/mk-map-01.png', //新しく指定
};

デモ

マーカーの位置調整

上記のようにきちんと表示されればこれだけで完了なのですが…マーカー画像のデザインによっては位置調整が発生することもあります。

先ほどの指定は、マーカーの先端が中央下部にあることが前提です。
もし横向きや、シャドウなどのマーカー本体以外の要素も含めて書き出したマーカー画像を使いたい場合、ただ表示させるだけではこんな風にずれが生じてしまうことがあります。

マーカー画像の表示成功例と失敗例

これを解決するには、iconオプションの指定値にMarkerImageクラスを利用し、位置調整の記述を追加します。

var markerOptions = {
    map: map,
    position: mapPosition,
    icon: new google.maps.MarkerImage(
        'https://www.granfairs.com/cms/wp-content/uploads/2024/03/_staff-2017-12-14-google-maps-api-02-04.png',
        new google.maps.Size(80,50),    //マーカー画像のサイズ
        new google.maps.Point(0,0),     //位置（0,0で固定）
        new google.maps.Point(値x,値y), //位置（任意の調整値）
    ),
};

MarkerImage()の中で、画像パス以外にさらに3つのクラスを指定しています。
このうち実際に位置調整を行っているのは最後のPoint(値x,値y)です。
それ以前、Size(80,50),Point(0,0)も位置調整を有効にするために必須の記述なので、忘れずに書いておきましょう。

Point(値x,値y)の書き方

試しにPoint(0,0)に指定してみると、画像左上を基点としてマーカー画像が表示されます。

Point(0,0)に指定した場合

これをベースに考えて、動かしたい数値分を値x,yに指定しましょう。

  • 値x：画像を左に動かしたいときは正数を、右に動かしたいときは負数を
  • 値y：画像を上に動かしたいときは正数を、下に動かしたいときは負数を

今回は80×50の画像に対し、右辺の中央が基点になるようにしたい（= 画像を左上に動かしたい）のでこのような指定になりました。

icon: new google.maps.MarkerImage(
    'https://www.granfairs.com/cms/wp-content/uploads/2024/03/_staff-2017-12-14-google-maps-api-02-04.png',
    new google.maps.Size(80,50),
    new google.maps.Point(0,0),
    new google.maps.Point(80,25), //左に80px、上に25px
),

上記位置調整の記述は、こちらのサイトを参考にさせていただきました！
好きな画像をマーカーとして表示させる

今回はここまでです。
マーカーをオリジナル画像に変えるだけでも、そのWebサイトらしさがぐっとあがりますね。Google Maps APIを使うときにはぜひ抑えておきましょう！

関連記事：Google Maps API（JavaScript API）