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

まずは呼び出し

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

<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

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