Maplace.js - 軽量なjQuery × Googleマップライブラリ // MOONGIFT Archived

Googleマップをプログラマブルに組み込むのに良さそうです。 GoogleマップはAPIの多彩さ、機能の柔軟さもあって様々なサービスで使われています。位置情報や地図を扱おうと思ったら一番に考えるのではないでしょうか。そんなGoogleマップをさらに手軽に使えるようにしてくれるライブラリがMaplace.jsです。機能は限られますが広範囲に利用できそうです。まずは簡単なデモ。地図の表示を行います。コードとしてはたった数行です。

// JavaScript
var maplace = new Maplace(); 
maplace.Load(); // or new Maplace().Load(); 
// HTML
<div id="gmap"></div>

その結果は次のようになります。

シンプルな地図表示。

次はドロップダウンやリストを使ったマーカーのデモ。マーカーは自動的に中央に表示されます。

// JavaScript（ドロップダウン）
new Maplace({
	locations: LocsA,
	map_div: '#gmap-dropdown',
	controls_title: 'Choose a location:'
}).Load();
// JavaScript（リスト）
new Maplace({
	locations: LocsB,
	map_div: '#gmap-list',
	controls_type: 'list',
	controls_title: 'Choose a location:'
}).Load();
// HTML
<div id="gmap-dropdown"></div>
<div id="gmap-list"></div>

リスト、ドロップダウンでマーカーを切り替えます。

メニュー形式も。JavaScriptとHTMLの連携も容易です。

// JavaScript
new Maplace({
	locations: LocsAB,
	map_div: '#gmap-menu',
	controls_type: 'list',
	controls_on_map: false
}).Load(); 
// HTML
<div id="controls"></div>
<div id="gmap-menu"></div>

メニュー形式。

タブなんて表示もあります。

// JavaScript
new Maplace({
	locations: LocsB,
	map_div: '#gmap-tabs',
	controls_div: '#controls-tabs',
	controls_type: 'list',
	controls_on_map: false,
	show_infowindow: false,
	start: 1,
	afterShow: function(index, location, marker) {
		$('#info').html(location.html);
	}
}).Load(); 
// HTML
<div id="controls-tabs"></div>
<div id="info"></div>
<div id="gmap-tabs"></div>

タブで地図を切り替えます。

さらに描画系。まずはマーカー同士を結ぶ線です。

// JavaScript
new Maplace({
	locations: LocsA,
	map_div: '#gmap-polyline',
	controls_div: '#controls-polyline',
	controls_type: 'list',
	controls_on_map: false,
	view_all_text: 'Start',
	type: 'polyline'
}).Load(); 
// HTML
<div id="controls-polyline"></div>
<div id="gmap-polyline"></div>

直線。

さらに囲い込み。

new Maplace({
	locations: LocsA,
	map_div: '#gmap-polygon',
	controls_div: '#controls-polygon',
	controls_type: 'list',
	show_markers: false,
	type: 'polygon',
	draggable: true
}).Load(); 
// HTML
<div id="gmap-polygon"></div>

こちらの場合マーカーを消しています。

距離を測ったりできます。

new Maplace({
	locations: LocsD,
	map_div: '#gmap-route',
	generate_controls: false,
	show_markers: false,
	type: 'directions',
	draggable: true,
	directions_panel: '#route',
	afterRoute: function(distance) {
		$('#km').text(': '+(distance/1000)+'km');
	}
}).Load(); 
// HTML
<h2>Route <strong id="km"></strong></h2>
<div id="gmap-route"></div>
<div id="route"></div>

経路計測

しかも経路表示に切り替えもできます。

地図の色を変更できます。これも使いどころがありそうですね。

new Maplace({
	map_div: '#gmap-styled',
	locations: LocsAB,
	start: 3,
	styles: {
		'Other style': [{
			stylers: [
					{ hue: "#00ffe6" },
					{ saturation: -20 }
			]
		}, {
			featureType: "road",
			elementType: "geometry",
			stylers: [
					{ lightness: 100 },
					{ visibility: "simplified" }
			]
		}, {
			featureType: "road",
			elementType: "labels",
			stylers: [
					{ visibility: "off" }
			]
		}],
		'Night': [{
			featureType: 'all',
			stylers: [
				{ invert_lightness: 'true' }
			]
		}],
		'Greyscale': [{              
			featureType: 'all',
			stylers: [
				{ saturation: -100 },
				{ gamma: 0.50 }
			]
		}]
	}
}).Load(); 
// HTML
<div id="gmap-styled"></div>

グレースケール変換。

その他にも色々な表示がサポートされています。

色々組み合わせつつマーカーデータはAjaxで取得。

ヒートマップを重ねた表示。

ちょっとグロい…大量のマーカー表示も行えます、ということです。

Maplace.jsはjQueryプラグインなのでデザイナーの方でも手軽に使えそうです。GoogleマップのAPIは最新のv3対応となっています。対応ブラウザはIE6を含め、メジャーなブラウザであればサポートされているとのことです。 Maplace.jsはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 Maplace.js - A small Google Maps Javascript plugin for jQuery danielemoraschi/maplace.js