WebサイトへのGoogleMap埋め込みと、デザインや機能のカスタマイズ方法

topimg
こんにちは、宇野です。

最近はWebサイトのアクセスマップなどにGoogleMapが使われていることが多くなってきました。このGoogleMap、ただWebサイトに設置するだけではなくデザインや機能をカスタマイズ出来ることはご存知でしょうか?
せっかくこだわってデザインしたサイトもGoogleMAPがそのままではもったいないですよね。
そこで、今回はGoogleMapをサイトに設置する方法から、デザインや機能をカスタマイズする方法をご紹介いたします。

目次

準備
1.WebサイトにGoogleMapを表示する。
2.マーカーを表示する。
3.マーカーのアイコンを変える。
4.マーカーの場所に地図を移動させる。
5.拡大・縮小する。
6.マーカーをクリックして情報ウィンドウを表示する。
7.情報ウィンドウのデザインを変える。
最後に

準備

まずはheadタグ内にGoogleMap APIを取得するスクリプトを貼り付けます。

bodyにはGoogleMapを表示するためのスクリプトを呼び出すonloadイベントと、Mapを表示するDIVタグを用意します。

これでWebサイトにGoogleMapを表示する準備は完了です。

1.WebサイトにGoogleMapを表示する。

まずはそのままWebサイトにGoogleMapを表示してみましょう。地図を表示するために必要な情報は、最初に表示する緯度・経度と地図の倍率、地図の種類です。
表示するために必要な最低限のスクリプトがこちらです。

1.緯度と経度
緯度と経度はGoogleマップで住所を入力して検索をすると、検索結果のURLに緯度と経度が表示されるのでこれをコピーしてきます。

2.地図の倍率
地図の倍率は数値で指定します。数値が小さいほど広域の地図になり、数値が大きいほど詳細な地図になります。
最小値は0です。最大値は詳細な地図が追加されるたびに大きくなっていきますが、現時点では21が最大になります。

3.地図の種類
HYBRID:航空写真上に主要な道路の透明なレイヤを表示します。
ROADMAP:市街地図を表示します。
SATELLITE:航空写真を表示します。
TERRAIN:地形的特徴を持つ地図を表示します。

デモページ


2.マーカーを表示する。

マーカーの表示はgoogle.maps.Markerを使って表示します。
必要な情報は先ほど取得した緯度・経度とマーカーを表示する地図です。

デモページ

3.マーカーのアイコンを変える。

マーカーのアイコンを変える場合はgoogle.maps.MarkerImageを使って、マーカーを表示する時に使うgoogle.maps.Markerにiconの引数を追加します。

デモページ

4.マーカーの場所に地図を移動させる。

地図の表示場所を変更する場合はgoogle.maps.MapのpanToという関数を使います。今回はリンクをクリックすると指定した場所に地図の表示が移動するようにしてみます。
地図を表示するDIVタグのすぐ上にAタグを追加し、onclickイベントにpanToの関数を書きます。関数の引数は移動先のマーカーの緯度と経度だけです。

デモページ

5.拡大・縮小する。

拡大・縮小はgoogle.maps.MapのsetZoomという関数を使います。拡大しか出来なさそうな名前ですが、縮小もsetZoomを使って行います。
引数はマップを表示する時に指定した倍率と同じもので、0が一番広域の地図で21が最も詳細な地図になります。
拡大と縮小は標準のマップについている[+]と[-]のボタンや、マウスのホイールでも可能ですが、setZoomを使うことで一気に拡大・縮小が出来ます。
弊社の岐阜オフィスを詳細表示するリンクと、日本全国を広域で表示するリンクで拡大・縮小をやってみたいと思います。

デモページ

6.マーカーをクリックして情報ウィンドウを表示する。

複数の支店や店舗がある場合はマーカーだけでなく、店舗名や連絡先などを表示したい時もあります。そのような場合はマーカーをクリックして情報ウィンドウを表示することが出来ます。
まずは下準備として、マーカーがクリックされた時の動きを記載します。今回はクリックされたらオフィスの名前と電話番号が表示されるようにします。

続いて、マーカーをクリックした時のイベントをgoogle.maps.event.addListenerを使って追加します。

addListenerの引数は3つあり、上記はマーカーをクリックした時にinfoWindowOpen関数を呼び出すという意味になります。

デモページ

7.情報ウィンドウのデザインを変える。

先ほどsetContentの中でBRタグを使っていたので気付いた方も見えたかもしれませんが、setContentの中はhtmlタグが記載できます。cssなども適用できますので、通常のWebサイトを制作するイメージでデザインが可能です。

デモページ

最後に

最後に、これまでご紹介した方法を組み合わせて、弊社のオフィスをGoogleMAPで表示してみました。

このようにGoogleMAPは自由にデザインや機能をカスタマイズすることが出来ます。皆さんもぜひ試してみてください。

関連記事

ページ上部へ戻る

 

 

Google+