[JS]カスタマイズも豊富なマッピングコンテンツを作成するスクリプト -jQuery Geo
Post on:2012年2月1日
sponsors
ウェブページで可能な限り素早くマップを表示し、カスタマイズ機能も豊富なマッピングコンテンツを作成するjQueryのプラグインを紹介します。
[ad#ad-2]
jQuery Geoのデモ
現在リリースされている安定版は1.0a3で、デモではさまざまなマッピングコンテンツが楽しめます。
下記に数多くあるデモから、いくつかご紹介。
ドラッグで移動が可能なシンプルなマップ。
6段階までズーム可能なフルサイズ表示のマップ。
[ad#ad-2]
マップのズームイン・ズームアウト。
マップの不透明度をコントロール。
点・線・図形などのポイントをマップに配置。
jQuery Geoの使い方
外部ファイル
「jquery.js」と当スクリプトを外部として記述します。
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquerygeo.com/jquery.geo-1.0a3.min.js"></script>
HTML
地図の配置は、jQueryのセレクタで指定できるようidを指定した空のdiv要素を使います。
<div id="map" style="height: 320px;"></div>
JavaScript
空のdiv要素をjQueryのセレクタで指定し、geomap();を呼び出します。
<script>
$(function() { $( "#map" ).geomap( ); });
</script>
sponsors
