2015.06.22 Posted by yoshitani
ウェブラボ技術メモ第13回です。
今回はGoogle Mapを簡単にカスタマイズできるプラグイン「AxGmap」を使用してみたいと思います。
Google Mapって色々な機能を使えますが、わざわざJavaScriptを自分で書くのって面倒ですよね。。。
一度でも自分で書いたことのある人はそう感じると思います。
そんな時に、このプラグインがとても便利です!!
では早速実装してみましょう。
下準備としては、HTMLのhead内で以下のようにGoogle Maps API、jQuery、jquery.axgmap.js を読み込みます。
|
|
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.axgmap.js"></script> |
次に地図の作成です。5つほどDEMOを作成してみましたので、1つずつ見ていきましょう。
マーカー・吹き出しの設置
|
|
<div class="axgmap" data-latlng="35.687505, 139.718702" data-zoom="15" data-map-width="980" data-map-height="320"> <div data-title="Weblab" data-window-open="1"> <p style="text-align: center; margin: 0 0 10px;"><img src="img/logo.gif" width="127" height="37" alt="Webデザイン制作・Web制作は東京（新宿区）のウェブラボ（Weblab）"></p> <p>Webデザイン制作・Web制作は<br>東京（新宿区）のウェブラボ（Weblab）</p> </div> </div> |
クラス axgmap が付与された要素が地図となります。各種属性で、地図の設定を行います。
data-latlng：地図の中央座標
data-zoom：地図の縮尺
data-map-width：地図の横幅
data-map-height：地図の縦幅
最初に設定する中央座標は本家Google MAPから右クリック→「この場所について」で取得してくるのが良いでしょう。
地図要素の子要素は、マーカー要素となります。ここに入れたい画像、文章などを入力することで、自由にマーカーを作ることができます。
data-latlng：マーカーを設置する座標 （省略時は地図の中央）
data-title：マウスホバー時に表示されるタイトル
data-window-open：true or 1 で最初から吹き出しを開く
DEMOはこちら
複数マーカーの設置
|
|
<div class="axgmap" data-latlng="35.687505, 139.718702" data-zoom="15" data-map-width="980" data-map-height="320"> <p data-latlng="35.689788, 139.710217" data-title="座標1">座標1</p> <p data-latlng="35.689614, 139.729357" data-title="座標2">座標2</p> <p data-latlng="35.683932, 139.718242" data-title="座標3">座標3</p> <p data-latlng="35.687592, 139.720216" data-title="座標4">座標4</p> </div> |
複数のピンを設置したい場合は、それぞれの子要素にdata-latlng属性で座標を指定してあげます。
DEMOはこちら
マーカー画像の変更
|
|
<div class="axgmap" data-latlng="35.687505, 139.718702" data-zoom="15" data-map-width="980" data-map-height="320"> <p data-marker-image="img/img.png" data-title="Weblab" data-window-open="1">Weblab</p> </div> |
マーカーの画像をオリジナルなものにしたい時は、data-marker-image属性で使いたい画像のURLを指定してあげます。
DEMOはこちら
マウスホイールでズームさせない
|
|
<div class="axgmap" data-latlng="35.687505, 139.718702" data-zoom="15" data-map-width="980" data-map-height="320" data-scrollwheel="0"></div> |
横幅いっぱいに地図を表示した時など、マウスホイールで地図がズームしてしまうのが邪魔な時がありますよね、そんな時はdata-scrollwheel属性で0かfalseを指定してあげます。
DEMOはこちら
座標などの情報の取得
|
|
<div class="axgmap" data-latlng="35.687505, 139.718702" data-zoom="15" data-map-width="980" data-map-height="320" data-map-status="1"> </div> |
地図要素にdata-map-status属性を指定してあげると、座標、縮尺などの情報を表示することもできます。
右クリックで気になる場所の座標を取得できます。これはかなり便利な機能ですね。
DEMOはこちら
以上です。いかがでしたでしょうか、HTMLをちょこっと書くだけで作れて凄く便利ですね。
その他オプション、機能などは配布もとのこちらから。
ルート表示など複雑なものは作れないようですが、ちょっとしたカスタマイズ程度なら役に立つ機会が結構あるのではないでしょうか。
以上ウェブラボ技術メモでした。
