2014年12月29日 | SKYBLUES.ORG

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はいくつかのコントロールのカスタマイズが可能で、地図の動作や外見を変更できます。

サンプルを変更しますと、実際に上記地図のコントロールを変更できます。

コントロール	説明	初期値	サンプル
div	マップを表示するHTMLの<div>エレメントタグを設定します。一意な指定が必要なため通常はID属性となります。マップサイズはCSSにて縦横幅を設定します。	–	–
lat	マップ中心の緯度を設定します。	–	–
lng	マップ中心の経度を設定します。	–	–
mapTypeControl	マップタイプ（地図や航空写真など）を切り替えるマップタイプコントロールを有効または無効にします。このコントロールは、デフォルトでは地図の右上隅に表示されます。	有効	:有効 :無効
mapTypeId	マップタイプを設定します。 ROADMAP: デフォルトの道路地図を表示します。 SATELLITE: Google Earth の航空写真を表示します。 HYBRID: 通常のビューと航空写真を混合して表示します。 TERRAIN: 地形情報に基づいて物理的なマップタイルを表示します。	ROADMAP	:ROADMAP :HYBRID :SATELLITE :TERRAIN
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>

マーカー

デフォルトアイコン

表示する地図の中心位置を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>

オーバーレイ

drawPolyline

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>

ルート

drawRoute

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>

drawRoute(Geocode)

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 ではなかなか難しいようです。

2014年12月
日	月	火	水	木	金	土
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30