Ownedmedia ウェブ制作に役立つコンテンツを発信中!

Google Apps API 2018.02.20

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

Tags: ,,

以前に当コンテンツの過去記事でグーグルマップのカスタマイズ方法について説明していきましたが、今回も新たなカスタマイズ方法を紹介していきます。前回はマップの色を変更しましたが、今回は目的地を示すマーカーをオリジナルのものに変えたいと思います。

 

前提条件としてグーグルマップのカスタマイズには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>

 

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

この記事を書いた人

オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?