- Simple Map で簡単に地図表示 WordPressプラグイン – Google Maps
- gmaps.js ライブラリを使用した地図表示 – Google Maps
- Google Maps JavaScript API v3 を直接使用した地図表示- Google Maps (作成中)
Google Maps を表示するには、Google Maps API v3 を使用するのが基本ですが、なかでもインタラクティブな Google MapsをWebページに埋め込むには Google Maps JavaScript API v3ですね。この Google Maps JavaScript API v3 でも、十分簡単に地図を表示できるのですが、それをより簡単にjQueryライクに表示できるようにしたのが、今回ご紹介する gmaps.js ライブラリになります。
Google Maps JavaScript API v3 の基本機能はほぼカバーしているので、マニアックな使い方でなければgmaps.js ライブラリでこと足りると思います。まあJavaのGoFな観点からするとFacade パターンといったところですかね！
ということで、多機能につき詳細はgmaps.jsをご覧いただき、ここでは主にルート機能に絞ってみたいと思います。
コントロール
Google Mapsはいくつかのコントロールのカスタマイズが可能で、地図の動作や外見を変更できます。
サンプルを変更しますと、実際に上記地図のコントロールを変更できます。
<style type="text/css">.gmaps img{ max-width: none !important; padding: 0 !important; margin: 0 !important; }</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://hpneo.github.io/gmaps/gmaps.js"></script>
<script type="text/javascript">
var map;
$(document).ready(function(){
map = new GMaps({
div: "#map-01",
lat: 35.7105617, // Map Center lat.
lng: 139.8042225, // Map Center lng.
mapTypeControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
overviewMapControl: true,
panControl: true,
scaleControl: false,
streetViewControl: true,
scrollwheel: true,
zoom: 15,
zoomControl: true
});
});
</script>
<div class="gmaps">
<div id="map-01" style="width: 100%; height: 300px"></div>
</div>
マーカー
デフォルトアイコン
表示する地図の中心位置をGMaps()クラスに設定し、浅草駅・東京スカイツリーのマーカーを追加します。マーカーはいくつでも追加可能です。位置データをJSONやXMLからロードし追加する等も可能ですね。
<style type="text/css">.gmaps img{ max-width: none !important; padding: 0 !important; margin: 0 !important; }</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://hpneo.github.io/gmaps/gmaps.js"></script>
<script type="text/javascript">
var map;
$(document).ready(function(){
map = new GMaps({
div: "#map-02",
lat: 35.7105617, // Map Center lat.
lng: 139.8042225 // Map Center lng.
});
map.addMarker({
lat: 35.710540,
lng: 139.797874,
title: "浅草駅",
infoWindow: {
content: "浅草駅"
}
});
map.addMarker({
lat: 35.710063,
lng: 139.8107,
title: "東京スカイツリー",
infoWindow: {
content: "東京スカイツリー"
}
});
});
</script>
<div class="gmaps">
<div id="map-02" style="height: 300px"></div>
</div>
カスタムアイコン
アイコン画像の変更も可能です。但しアイコンサイズは指定不可のようで、予め画像をリサイズしておく必要がありそうです。gmaps.jsソースコードを斜め読みする限り、どうもマーカーのオプション指定はパイプで指定する旧APIのGoogle maps API v2の指定方法になっているっぽいです。うーむ、いまいちです。これならv3を直接弄ったほうがサイズ指定など細かな設定ができ、使い勝手がよさそうな気がします。
<style type="text/css">.gmaps img{ max-width: none !important; padding: 0 !important; margin: 0 !important; }</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://hpneo.github.io/gmaps/gmaps.js"></script>
<script type="text/javascript">
var map;
$(document).ready(function(){
map = new GMaps({
div: "#map-03",
lat: 35.7105617, // Map Center lat.
lng: 139.8042225 // Map Center lng.
});
map.addMarker({
lat: 35.710540,
lng: 139.797874,
title: "浅草駅",
infoWindow: {
content: "浅草駅"
},
icon: "http://maps.google.com/mapfiles/ms/micons/subway.png"
});
map.addMarker({
lat: 35.710063,
lng: 139.8107,
title: "東京スカイツリー",
infoWindow: {
content: "東京スカイツリー"
},
icon: "http://www.tokyo-skytree.jp/img/mod/mod_indexlist_img_02.gif"
});
});
</script>
<div class="gmaps">
<div id="map-03" style="height: 300px"></div>
</div>
オーバーレイ
GMaps()クラスに、浅草駅－東京スカイツリー間を直線で結ぶdrawPolyline()を追加します。
<style type="text/css">.gmaps img{ max-width: none !important; padding: 0 !important; margin: 0 !important; }</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://hpneo.github.io/gmaps/gmaps.js"></script>
<script type="text/javascript">
var map;
$(document).ready(function(){
map = new GMaps({
div: "#map-04",
lat: 35.7105617, // Map Center lat.
lng: 139.8042225 // Map Center lng.
});
map.addMarker({
lat: 35.710540,
lng: 139.797874,
title: "浅草駅",
infoWindow: {
content: "浅草駅"
}
});
map.addMarker({
lat: 35.710063,
lng: 139.8107,
title: "東京スカイツリー",
infoWindow: {
content: "東京スカイツリー"
}
});
map.drawPolyline({
path: [[35.710540,139.797874], [35.710063,139.8107]],
strokeColor: '#01b1ff',
strokeOpacity: 0.8,
strokeWeight: 6
});
});
</script>
<div class="gmaps">
<div id="map-04" style="height: 300px"></div>
</div>
ルート
GMaps()クラスに、浅草駅から東京スカイツリーまでのルート(徒歩)表示するdrawRoute()を追加します。
<style type="text/css">.gmaps img{ max-width: none !important; padding: 0 !important; margin: 0 !important; }</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://hpneo.github.io/gmaps/gmaps.js"></script>
<script type="text/javascript">
var map;
$(document).ready(function(){
map = new GMaps({
div: "#map-05",
lat: 35.7105617, // Map Center lat.
lng: 139.8042225 // Map Center lng.
});
map.addMarker({
lat: 35.710540,
lng: 139.797874,
title: "浅草駅",
infoWindow: {
content: "浅草駅"
}
});
map.addMarker({
lat: 35.710063,
lng: 139.8107,
title: "東京スカイツリー",
infoWindow: {
content: "東京スカイツリー"
}
});
map.drawRoute({
origin: [35.710540,139.797874],
destination: [35.710063,139.8107],
travelMode: 'walking',
strokeColor: '#01b1ff',
strokeOpacity: 0.8,
strokeWeight: 6
});
});
</script>
<div class="gmaps">
<div id="map-05" style="height: 300px"></div>
</div>
GMaps()クラスに、ジオコーディング（住所やランドマーク名から経度、緯度を取得）を使い、浅草駅から東京スカイツリーまでルート(徒歩)表示するdrawRoute()を追加します。
<style type="text/css">.gmaps img{ max-width: none !important; padding: 0 !important; margin: 0 !important; }</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://hpneo.github.io/gmaps/gmaps.js"></script>
<script type="text/javascript">
var map;
$(document).ready(function(){
map = new GMaps({
div: "#map-06",
lat: 35.7105617, // Map Center lat.
lng: 139.8042225 // Map Center lng.
});
GMaps.geocode({
address: "MRT浅草駅",
callback: function(results, status) {
if (status == 'OK') {
var sl = results[0].geometry.location;
map.addMarker({
lat: sl.lat(),
lng: sl.lng(),
title: "浅草駅",
infoWindow: {
content: "浅草駅"
}
});
GMaps.geocode({
address: "東京スカイツリー",
callback: function(results, status) {
if (status == 'OK') {
var el = results[0].geometry.location;
map.addMarker({
lat: dl.lat(),
lng: dl.lng(),
title: "東京スカイツリー",
infoWindow: {
content: "東京スカイツリー"
}
});
map.drawRoute({
origin: [sl.lat(), sl.lng()],
destination: [dl.lat(), dl.lng()],
travelMode: 'walking',
strokeColor: '#01b1ff',
strokeOpacity: 0.8,
strokeWeight: 6
});
}
}
});
}
}
});
});
</script>
<div class="gmaps">
<div id="map-06" style="height: 300px"></div>
</div>
「浅草駅」でジオコーディング検索しますと、なぜか「TX浅草駅」になってしまうので（笑）、「MRT浅草駅」としています。下のGoogle Maps Embed APIも「浅草駅」とすると「TX浅草駅」になってしまうため「MRT浅草駅」とすると今度はなぜか「浅草寺」なってしまいます。仕方なく「銀座線浅草駅」としていますが、この座標も若干違う気がします。どうもジオコーディングで検索される浅草駅の座標が違っているようです。実際のルートは浅草駅を出て吾妻橋を渡ったほうが近い気がします。日によってTX浅草駅なったり浅草駅になったりと、「浅草駅」のジオコーディングは鬼門ですね（笑）
おまけ
本当は以下のGoogle Maps Embed APIのようなルート表示が理想なのですが、 gmaps.js ライブラリや Google Maps API v3 ではなかなか難しいようです。
