グーグルマップのカスタマイズでオリジナルのマーカーに変更する | 大阪市天王寺区SOHOホームページ制作 | デザインサプライ-DesignSupply.-
0%

Programmingプログラミングナレッジ

Posted:2018.02.20

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

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

 

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

 

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

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】