[JS]カスタマイズも豊富なマッピングコンテンツを作成するスクリプト -jQuery Geo

ウェブページで可能な限り素早くマップを表示し、カスタマイズ機能も豊富なマッピングコンテンツを作成するjQueryのプラグインを紹介します。

サイトのキャプチャ

jQuery Geo

jQuery Geoのデモ

現在リリースされている安定版は1.0a3で、デモではさまざまなマッピングコンテンツが楽しめます。

デモのキャプチャ

デモページ

下記に数多くあるデモから、いくつかご紹介。

デモのキャプチャ

simplest

ドラッグで移動が可能なシンプルなマップ。

デモのキャプチャ

mobile

6段階までズーム可能なフルサイズ表示のマップ。

デモのキャプチャ

zoom

マップのズームイン・ズームアウト。

デモのキャプチャ

opacity & toggle

マップの不透明度をコントロール。

デモのキャプチャ

geomap find test

点・線・図形などのポイントをマップに配置。

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>

top of page

©2017 coliss