このサンプルは、jQueryのgoogleMapsプラグインを利用して東京タワーのマップを表示します。googleMapsプラグインは、Google Maps v2のAPIを利用しています。
jQueryのgoogleMapsプラグインを利用するには、jQuery 1.3.2のライブラリとGoogle Maps v2のライブラリも組み込む必要があります。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=...Your API Key..."
type="text/javascript"></script>
<script src="ajax/googleMap2/jquery.googlemaps.js"
type="text/javascript"></script>
グーグルマップを表示するには、jQueryのセレクタでdiv#canvas要素を検索してgoogleMaps()メソッドを実行します。このメソッドの引数には、緯度、経度、ズームレベルを指定します。
$('#canvas').googleMaps({
latitude: 35.658632, // 緯度
longitude: 139.745411, // 経度
depth: 18 // ズームレベル(大きい数を指定すると拡大)
});