ホームページを作る人のネタ帳

ものっすごい簡単にGoogleマップAPIを操作出来るjQueryGoogleMAPプラグイン

jQueryGoogleMapプラグイン
タイトルで全部言っちゃってる気がしないではないですが、WebサイトにGoogleMAPを設置して、色々と簡単にAPIを叩けるプラグインです。

ちなみにこの記事の為にこのjQueryプラグインを読み込むなんてことはしておりませんので、説明で使用しているMAPは全てキャプチャー画像です。本来なら、ぐりぐりと拡大縮小出来るあのMAPを貼り付ける事が出来ます。気になる方は、最後に紹介するチュートリアルページをご覧になっていただければ、わかると思います。

まずは呼び出し


基本の呼び出し。
まずはページのどっかに書いて読み込みましょう。

<script src="javascripts/jquery.js"></script>
<script type="text/javascript" src="//www.google.fr/jsapi"></script>
<script type="text/javascript">
google.load("maps", "3.4", {
other_params: "sensor=false&language=fr"
});
</script>
<script type="text/javascript" src="javascripts/jquery.googlemap.js"></script>

普通のMAP


これなら普通にGoogleMAPのコードコピペすればいいです。

<div id="map" style="width: 300px; height: 300px;"></div>
<script type="text/javascript">
$(function() {
$("#map").googleMap({
zoom: 10, // Initial zoom level (optional)
coords: [48.895651, 2.290569], // Map center (optional)
type: "ROADMAP" // Map type (optional)
});
})
</script>

マーカーを追加し、マーカーにリンクを追加


マーカーにリンクをはる
ただ、、、マーカーをクリックするっていう事自体が一般的なユーザー体験ではないので、注意が必要です。

<div id="map" style="width: 300px; height: 300px;"></div>
<script type="text/javascript">
$(function() {
$("#map").googleMap();
$("#map").addMarker({
coords: [48.895651, 2.290569], // GPS coords
url: 'http://www.tiloweb.com', // Link to redirect onclick (optional)
id: 'marker1' // Unique ID for your marker
});
})
</script>


マーカーを追加し、マーカーをクリックしたら吹き出しを出して案内文を表示する


説明文
マーカー自体をクリックすると説明文を吹き出しします。こちらもマーカーをクリックするというユーザー体験を過信しないように作る必要があります。

<div id="map" style="width: 300px; height: 300px;"></div>
<script type="text/javascript">
$(function() {
$("#map").googleMap();
$("#map").addMarker({
coords: [48.895651, 2.290569], // GPS coords
title: 'Marker n°1', // Title
text: '<b>Lorem ipsum</b> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' // HTML content
});
})
</script>

その他の機能


その他にも簡単コードで以下の様なことが出来ます。
道案内はちょっとだけ複雑ですけどね。

複数のマーカーを設置する
複数マーカーの設置


道案内をMAPに表示する(複数も可)
道案内

オリジナルマーカーを利用する
オリジナルマーカーの利用


jQuery Google Mapのチュートリアル、ダウンロードは以下から


jQuery Google Map

これだけ手軽に設置出来るプラグイン、是非チェックしてみてください。
それでは、また。
yamada
Posted byyamada

Comments 0

There are no comments yet.

Leave a reply