Google Mapのルート表示なども簡単に表示できるjQueryプラグイン「Maplace.js」

Google Mapのルート表示なども簡単に表示できるjQueryプラグイン「Maplace.js」サンプル Google Mapを表示するJavaScriptはそこそこ簡単ですすが、ルート表示させるとなかなか厄介です。
jQueryプラグインのMaplace.js - A small Google Maps Javascript helper.を利用するとルートを簡単にプロットできたり、特定位置をつなぐ、塗りつぶすなど簡単に表示させられることが可能です。

使用方法 Maplace.js - A small Google Maps Javascript helper.からファイルをダウンロード。
<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry&v=3.7"></script>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="maplace.js"></script>

表示させたい場所に下記を表示。
<div id="gmap" style="width:100%;height:300px;"></div>
大きさは適当に調整ください。

そして単純にマップを表示させるのは以下のようにJavaScriptを記述します。
$(function() {
var maplace = new Maplace();
maplace.Load();
});

次にルートを表示させる場合はMaplaceに以下を記述
new Maplace({
locations: LocsA, //後述
map_div: '#gmap',
type: 'directions',
draggable: true, //ドラッガブルにする
directions_panel: '#route', //ルートを表示するid名
afterRoute: function(distance) { //総距離を表示
$('#km').text(': '+(distance/1000)+'km');
}
}).Load();

対応する総距離とルート詳細を表示するために下記を追加します。
総距離 <strong id="km"></strong><br />
ルート詳細<br />
<div id="route" style="height:130px;overflow:auto;"></div>

ルートは以下のようなものをマップ表示より上にします。
var LocsA = [
{
lat: 45.9, //緯度
lon: 10.9, //経度
title: 'Title A1', //タイトル
html: '<h3>Content A1</h3>', //コンテンツ
icon: 'http://www.google.com/mapfiles/markerA.png' //アイコン
},
{
lat: 44.8,
lon: 1.7,
title: 'Title B1',
html: '<h3>Content B1</h3>',
icon: 'http://www.google.com/mapfiles/markerB.png',
show_infowindow: false
},
{
lat: 51.5,
lon: -1.1,
title: 'Title C1',
html: [
'<h3>Content C1</h3>',
'<p>Lorem Ipsum..</p>'
].join(''),
icon: 'http://www.google.com/mapfiles/markerC.png'
}
];

これで完成です。
上記Maplaceのtypeを変更することで、場所をつないだり塗りつぶししたり変更が可能です。

Google Mapのルート表示なども簡単に表示できるjQueryプラグイン「Maplace.js」サンプル

sponsors

「Google Mapのルート表示なども簡単に表示できるjQueryプラグイン「Maplace.js」」をシェアする

記事作成:
記事URL:

TOP > > > Google Mapのルート表示なども簡単に表示できるjQueryプラグイン「Maplace.js」