コーディングメソドロジー

第47回 GoogleMapsのカスタマイズ

近年スマートフォンなど屋外利用を可能にしたデバイスの普及により、WEBサイトにおける地図の重要性が増しています。
会社の所在地・店舗へのアクセスなど、ユーザー/サイト運営者双方にとって大切な役割を担う地図を、非常に簡単に提供してくれるのがおなじみGoogleMapsです。誰しも一度は利用したことがあるのではないでしょうか。
そんな便利なGoogleMapsですが、ただ埋め込むだけですと所在地を示すマーカーのデザインが単一だったり、住所以外の情報は表示されなかったりと、やや物足りなさを感じてしまうこともあります。そこで今回は目的地を示すマーカーをオリジナル画像に変更、吹き出し内の文言を自由に編集する方法をご紹介します。一工夫を加え、よりユーザビリティの高いGoogleMapsを作ってみましょう!

GoogleMapsのカスタマイズ

01 デフォルト状態のマーカー

01 デフォルト状態のマーカー

02 オリジナル画像&テキストでユーザビリティアップ!

02 オリジナル画像&テキストでユーザビリティアップ!

GoogleMaps API (現在version3)

GoogleMaps APIとはプログラムを集めたライブラリーのようなもので、Javascriptを使って書かれています。ですが左記のようにJavascriptの特別な知識がなくても、簡単にカスタマイズすることが可能です。
まだまだいろいろなAPIがありますので、ぜひ試してみて下さい。

(1) GoogleMapsAPIを読み込む

まずGoogleMapsAPIを読み込んで地図を表示してみましょう。下記コードのset_to_true_or_faleという箇所は、ユーザーが位置情報取得にセンサーを使用するか否かを決めるパラメーターです。状況に応じて、trueかfalseを選択してください。

(1) GoogleMapsAPIを読み込む

(2) オプション・基本情報を用意

<script type="text/javascript">タグ内に下記コードを記入します。

(2) オプション・基本情報を用意

(3) 初期設定、表示領域を作成して地図を表示

Bodyタグにonload="init()"と追記し、表示領域を作って、地図を表示します。その際、上記のjs内で書いたID名と合わせることに注意してください。
これでAPIを使って通常の地図を表示することができました。

(3) 初期設定、表示領域を作成して地図を表示

(4) オプションコードでマーカーと吹き出しをカスタマイズ

(2)の//オプションコードという記述から下に下記コードを追記して、オリジナル画像マーカーと吹き出しを表示させます。

(4) オプションコードでマーカーと吹き出しをカスタマイズ

オリジナル画像&テキストのマップ(右図02)が完成です!

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム