- Coding Methodology
- 第47回 GoogleMapsのカスタマイズ
第47回 GoogleMapsのカスタマイズ
近年スマートフォンなど屋外利用を可能にしたデバイスの普及により、WEBサイトにおける地図の重要性が増しています。
会社の所在地・店舗へのアクセスなど、ユーザー/サイト運営者双方にとって大切な役割を担う地図を、非常に簡単に提供してくれるのがおなじみGoogleMapsです。誰しも一度は利用したことがあるのではないでしょうか。
そんな便利なGoogleMapsですが、ただ埋め込むだけですと所在地を示すマーカーのデザインが単一だったり、住所以外の情報は表示されなかったりと、やや物足りなさを感じてしまうこともあります。そこで今回は目的地を示すマーカーをオリジナル画像に変更、吹き出し内の文言を自由に編集する方法をご紹介します。一工夫を加え、よりユーザビリティの高いGoogleMapsを作ってみましょう！
GoogleMapsのカスタマイズ
01 デフォルト状態のマーカー
02 オリジナル画像&テキストでユーザビリティアップ！
GoogleMaps API (現在version3)
GoogleMaps APIとはプログラムを集めたライブラリーのようなもので、Javascriptを使って書かれています。ですが左記のようにJavascriptの特別な知識がなくても、簡単にカスタマイズすることが可能です。
まだまだいろいろなAPIがありますので、ぜひ試してみて下さい。
(1) GoogleMapsAPIを読み込む
まずGoogleMapsAPIを読み込んで地図を表示してみましょう。下記コードのset_to_true_or_faleという箇所は、ユーザーが位置情報取得にセンサーを使用するか否かを決めるパラメーターです。状況に応じて、trueかfalseを選択してください。
(2) オプション・基本情報を用意
<script type="text/javascript">タグ内に下記コードを記入します。
(3) 初期設定、表示領域を作成して地図を表示
Bodyタグにonload="init()"と追記し、表示領域を作って、地図を表示します。その際、上記のjs内で書いたID名と合わせることに注意してください。
これでAPIを使って通常の地図を表示することができました。
(4) オプションコードでマーカーと吹き出しをカスタマイズ
(2)の//オプションコードという記述から下に下記コードを追記して、オリジナル画像マーカーと吹き出しを表示させます。
オリジナル画像＆テキストのマップ(右図02)が完成です！
