グーグルマップのカスタマイズでオリジナルのマーカーに変更する
最終更新日: 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>いかがでしょうか、たったこれだけでグーグルマップにオリジナルのマーカーを表示させることができます。ちょっとしたことですが、オリジナルのマーカーを使うことでブランディングなども強化できたりするのでお店などをされているビジネスオーナー様には是非オススメです!今回のサンプルはこちらに用意しておりますのでご参考ください。
sponserd
keyword search
recent posts
- GSAPとvivusを使ったSVGのドローアニメーション
GSAPとvivusを使ったSVGのドローアニメーション
- GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
categories