- 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をご覧いただき、ここでは主にルート機能に絞ってみたいと思います。
コントロール
コントロール | 説明 | 初期値 | サンプル |
---|---|---|---|
div | マップを表示するHTMLの<div>エレメントタグを設定します。一意な指定が必要なため通常はID属性となります。マップサイズはCSSにて縦横幅を設定します。 | – | – |
lat | マップ中心の緯度を設定します。 | – | – |
lng | マップ中心の経度を設定します。 | – | – |
mapTypeControl | マップ タイプ(地図や航空写真など)を切り替えるマップ タイプ コントロールを有効または無効にします。このコントロールは、デフォルトでは地図の右上隅に表示されます。 | 有効 | :有効 :無効 |
mapTypeId |
マップ タイプを設定します。
|
ROADMAP |
|
overviewMapControl | 概観マップを有効または無効にします。概観マップ コントロールは、完全に表示(サムネイル概観マップを表示)するか、折りたたんで最小化した状態で表示することができます。 | 有効 | 有効 無効 |
panControl | 移動コントロールの有効/無効を設定します。このコントロールは、デフォルトでは地図の左上隅に表示されます。 | 有効 | 有効 無効 |
scaleControl | シンプルな地図縮尺を表示するスケール コントロールの有効/無効を設定します。このコントロールは、デフォルトでは表示されません。 | 無効 | 有効 無効 |
streetViewControl | ここに含まれるペグマン アイコンを地図上にドラッグして、ストリートビューを有効にすることができます。このコントロールは、デフォルトでは地図の左上隅に表示されます。 | 有効 | 有効 無効 |
scrollwheel | マップ上のスクロールホイールの有効/無効を設定します。 | 有効 | 有効 無効 |
zoom | ズーム倍率を設定します。0~21の数字を設定します。 | 15 | |
zoomControl | 地図のズーム レベルをコントロールするために、スライダ(大きな地図の場合)または小さな「+」ボタン(小さな地図の場合)が表示されます。デフォルトではこのコントロールは、タッチ パネル端末以外では地図の左上隅に、タッチ パネル端末では左下隅に表示されます。 | 有効 | 有効 無効 |
<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>
マーカー
デフォルトアイコン
<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>
カスタムアイコン
<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>
オーバーレイ
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>
ルート
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>
drawRoute(Geocode)
<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 ではなかなか難しいようです。