はじめに
Googleマップに象徴されるように、Webページで地図を表示することは近年一般的に行われています。特に静的な画像ではなくJavaScriptで動的に描画される地図は、利用者がインタラクティブに操作を行って場所の情報を取得できるため、Webページの利便性を高める手段として有用です。
前回は世界地図を表示するjQuery Vector Maps（JQVMap）と、日本地図を表示するJapan Mapの、2種類のjQueryプラグインを取り上げました。これらは国・地域や都道府県といった単位で利用者に情報を表示したり、利用者に選択させたりする用途に便利に利用できます。
一方で世界地図や日本地図といった広範囲の地図は、より狭い場所（地点）に着目して情報を表示する用途には向いていません。例えば以下のような用途には道路・建物のレベルで細かく情報を表示できるGoogleマップが便利です。
- Wi-Fiスポットの場所と内容を地図上に表示
- リストから支社を選ぶと地図で場所を表示する会社案内
そこで今回は、Googleマップを簡易に利用できるjquery.gmap3プラグインを取り上げ、紹介していきます。このプラグインは内部的にGoogleマップを利用するAPI（Google Maps API V3）を利用していますが、プラグインを利用することでよりシンプルにコードを記述することができます。
対象読者
- オススメスポットをインタラクティブな地図で紹介したい方
- Googleマップを使いたいがAPIを意識したくない方
必要な環境
jQueryには1.x系と2.x系が存在し、2.x系はInternet Explorer 6～8との互換性を切り捨てることでコードサイズを縮小しています。今回は互換性を考慮して1.x系の最新版であるjQuery 1.11.1を使用します。
今回は以下の環境で動作を確認しています。
-
Windows 7 64bit版
- Internet Explorer 11
地名を指定するときに効果を発揮
jquery.gmap3は、Googleマップを表示するjQueryプラグインです。GitHubからMITライセンスで配布されています。ダウンロードファイルに含まれるJavaScriptファイル（jquery.gmap3.js）を参照するようHTMLファイルに記述します。
jquery.gmap3で東京周辺の地図を表示する例をリスト1に示します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- Google Maps APIの読込 ... （1） -->
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<!-- jQueryの読込 -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- gmap3の読込 ... （2） -->
<script type="text/javascript" src="js/gmap3/jquery.gmap3.js"></script>
<script>
$(function() {
$("#gmap3_1").gmap3({ // 地図の表示 ... （3）
latitude: 35.6988,
longitude: 139.7747,
zoom: 8,
navigationControl: true,
mapTypeControl: true,
scaleControl: true
});
});
</script>
<title>gmap3サンプル1</title>
</head>
<body>
<h1>gmap3サンプル1</h1>
<!-- 地図を表示する要素 ... （4） -->
<div id="gmap3_1" style="width:640px;height:480px"></div>
</body>
</html>
まず（1）でGoogle Maps APIのJavaScriptを読み込んだ後、jQueryとプラグイン（2）を読み込みます。地図を表示する要素（4）に対してgmap3メソッドで地図を表示します（3）。
リスト1を実行するとGoogleマップで東京近辺の地図が表示されます。
gmap3メソッドに指定する主なパラメータを表1に示します。addressとlatitude／longitudeはどちらかを必ず指定する必要があります（両方を指定するとaddressが優先）。
| パラメータ名 | 内容 | 初期値 |
|---|---|---|
| address | 表示する住所・地名など | なし（指定必須） |
| latitude | 緯度 | なし（指定必須） |
| longitude | 経度 | なし（指定必須） |
| zoom | 縮尺 | 10 |
| navigationControl | 地図の操作部の表示・非表示 | true |
| mapTypeControl | 地図タイプ選択部の表示・非表示 | true |
| scaleControl | 縮尺の表示・非表示 | true |
なおリスト1と同じ内容をjquery.gmap3プラグインを使わないで表示する場合、JavaScript部はリスト2のようになります。
$(function() {
// 地図を表示するオプション設定
var options = {
center: new google.maps.LatLng(35.6988, 139.7747),
zoom: 8,
navigationControl: true,
mapTypeControl: true,
scaleControl: true
};
// 地図を表示
var map = new google.maps.Map($("#gmap3_1").get(0), options);
});
リスト1やリスト2のように緯度・経度を直接指定する場合はプラグインの有無によりコード量に大きな違いがありませんが、緯度・経度の代わりに住所・地名を指定する場合は、住所・地名から緯度・経度を求める処理をjquery.jmap3プラグインが自動的に行うため、コードがよりシンプルになります。
リスト3は地名「大阪」を指定してjquery.gmap3で地図を表示するコードです。
$(function() {
$("#gmap3_1").gmap3({
address: "大阪",
zoom: 8,
navigationControl: true,
mapTypeControl: true,
scaleControl: true
});
});
リスト3・図2と同じ表示をプラグインなしで実装すると、リスト4のように住所・地名から緯度・経度を求める処理をGoogle Maps APIのジオコーディングサービスで明示的に行う必要があり、コード量が増えてしまいます。
$(function() {
// Geocoderで大阪の緯度・経度を取得
var geocoder = new google.maps.Geocoder();
geocoder.geocode({address:"大阪"}, function(results, status) {
var location = results[0].geometry.location; // 取得できた緯度・経度
var options = {
center: location, // 取得できた緯度・経度を中央に設定
zoom: 8,
navigationControl: true,
mapTypeControl: true,
scaleControl: true
};
// 地図を表示
var map = new google.maps.Map($("#gmap3_1").get(0), options);
});
});
