グーグルマップのカスタマイズでオリジナルのマーカーに変更する

Google Apps API2018.2.20

最終更新日：2018.2.20 Update!!

以前に当コンテンツの過去記事でグーグルマップのカスタマイズ方法について説明していきましたが、今回も新たなカスタマイズ方法を紹介していきます。前回はマップの色を変更しましたが、今回は目的地を示すマーカーをオリジナルのものに変えたいと思います。前提条件としてグーグルマップのカスタマイズにはGoogle Maps APIのAPIキーが必要となります。こちらについては過去記事「グーグルマップのカスタマイズでグレースケールのマップに変更する」で詳しくまとめておりますのでこちらを参照ください。あらかじめAPIキーを取得しておきましょう。まずは今回使用するオリジナルのマーカーピンの画像を作成しておきます。一般的なデザインでは背景を透過させる必要がありますのでpng形式の画像を使うことになります。

JavaScriptでマップに使うマーカーを指定

前回同様、JavaScriptでカスタマイズしたグーグルマップを定義していきます。下記のようにグーグルマップをカスタマイズするコードを記述します。ここでポイントとなるのは、Markerクラス内にiconの値でオリジナルマーカーに使う画像のファイルパスを記述します。あとは指定したマップに設定を紐づけていくだけです。【HTML & javascript】（一部抜粋）

<!DOCTYPE html>
<html>
<head>
<style>
  #map {
    width: 100%;
    height: 300px;
  }
</style>
</head>
<body>
  <div id="map>
  </div>
  <script>
    function initMap() {
      var customMap = new google.maps.Map(document.getElementById('map'), {
        zoom: 17,
        center: {
          lat: 34.686494,
          lng: 135.52618
        },
      });
      var customMarker = new google.maps.Marker({
        position: {
          lat: 34.686494,
          lng: 135.52618
        },
        icon: './icon-marker.png',
        map: customMap
      });
    };
  </script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=[APIキー]&callback=initMap">
  </script>
</body>
</html>

いかがでしょうか、たったこれだけでグーグルマップにオリジナルのマーカーを表示させることができます。ちょっとしたことですが、オリジナルのマーカーを使うことでブランディングなども強化できたりするのでお店などをされているビジネスオーナー様には是非オススメです！今回のサンプルはこちらに用意しておりますのでご参考ください。