Google Mapを簡単にカスタマイズする

ウェブラボ技術メモ第13回です。

今回はGoogle Mapを簡単にカスタマイズできるプラグイン「AxGmap」を使用してみたいと思います。

Google Mapって色々な機能を使えますが、わざわざJavaScriptを自分で書くのって面倒ですよね。。。

一度でも自分で書いたことのある人はそう感じると思います。

そんな時に、このプラグインがとても便利です!!

では早速実装してみましょう。

下準備としては、HTMLのhead内で以下のようにGoogle Maps API、jQuery、jquery.axgmap.js を読み込みます。

次に地図の作成です。5つほどDEMOを作成してみましたので、1つずつ見ていきましょう。

マーカー・吹き出しの設置

クラス axgmap が付与された要素が地図となります。各種属性で、地図の設定を行います。

data-latlng：地図の中央座標

data-zoom：地図の縮尺

data-map-width：地図の横幅

data-map-height：地図の縦幅

最初に設定する中央座標は本家Google MAPから右クリック→「この場所について」で取得してくるのが良いでしょう。

地図要素の子要素は、マーカー要素となります。ここに入れたい画像、文章などを入力することで、自由にマーカーを作ることができます。

data-latlng：マーカーを設置する座標　（省略時は地図の中央）

data-title：マウスホバー時に表示されるタイトル

data-window-open：true or 1 で最初から吹き出しを開く

DEMOはこちら

複数マーカーの設置

複数のピンを設置したい場合は、それぞれの子要素にdata-latlng属性で座標を指定してあげます。

DEMOはこちら

マーカー画像の変更

マーカーの画像をオリジナルなものにしたい時は、data-marker-image属性で使いたい画像のURLを指定してあげます。

DEMOはこちら

マウスホイールでズームさせない

横幅いっぱいに地図を表示した時など、マウスホイールで地図がズームしてしまうのが邪魔な時がありますよね、そんな時はdata-scrollwheel属性で0かfalseを指定してあげます。

DEMOはこちら

座標などの情報の取得

地図要素にdata-map-status属性を指定してあげると、座標、縮尺などの情報を表示することもできます。

右クリックで気になる場所の座標を取得できます。これはかなり便利な機能ですね。

DEMOはこちら

以上です。いかがでしたでしょうか、HTMLをちょこっと書くだけで作れて凄く便利ですね。

その他オプション、機能などは配布もとのこちらから。

ルート表示など複雑なものは作れないようですが、ちょっとしたカスタマイズ程度なら役に立つ機会が結構あるのではないでしょうか。

以上ウェブラボ技術メモでした。