読者です 読者をやめる 読者になる 読者になる

グーグルマップで現在位置からクリックした場所の徒歩ルートとカロリーを表示

f:id:haru-komugi:20140711161303j:plain
グーグルマップで現在位置からクリックした場所の徒歩ルートとカロリーを表示します。

サンプルはこちら
http://moeten.info/js/20140711_calMap/

ソースはこちら
index.html

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=GOOGLE_MAP_API_KEY&sensor=true"></script>
    <script type="text/javascript">

        //jQuery初期化関数
        $(function(){

            //マップ関係
            var map;
            var currentPos;
            var targetPos;
            var destMarker;
            var directionsDisplay;

            //初期化関数
            /*-------------------------------------------------------------------*/
            function init(){

                //地図の作成
                createMap();

                //イベントリスナーの登録
                setEventLitiner();

                //現在位置の取得
                getCurrentPostion();

            }

            //地図の作成
            /*-------------------------------------------------------------------*/
            function createMap(){

                //マップオプション
                var mapOptions = {
                    center: new google.maps.LatLng( 37.4958709,139.9271118 ),
                    zoom: 13,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                //マップの描画
                map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

            }

            //イベントリスナーの登録
            /*-------------------------------------------------------------------*/
            function setEventLitiner(){

                google.maps.event.addListener(map, 'click', setMarker);

            }

            //現在位置の取得
            /*-------------------------------------------------------------------*/
            function getCurrentPostion(){

                //GPS取得
                navigator.geolocation.getCurrentPosition(function(pos) {

                    // 現在位置にピンをたてる
                    currentPos = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);

                    //せっかくなのでかっこいいアイコンに
                    var image = new google.maps.MarkerImage(
                            'img/source-bluedot.png',
                            null,
                            null,
                            new google.maps.Point( 8, 8 ),
                            new google.maps.Size( 17, 17 )
                    );
                    var currentMarker = new google.maps.Marker({
                        flat: true,
                        icon: image,
                        map: map,
                        optimized: false,
                        title: '現在地',
                        position: currentPos
                    });

                    //マップに配置
                    currentMarker.setMap(map);

                    //マップのセンターを現在位置に移動
                    map.panTo( currentPos );

                });

            }

            //クリックした場所にマーカーを設置
            /*-------------------------------------------------------------------*/
            function setMarker(event){

                //クリック位置の緯度経度取得
                targetPos = new google.maps.LatLng(event.latLng.lat(),event.latLng.lng());

                //すでにマーカーがある場合は地図から削除する
                if( destMarker ){
                    destMarker.setMap(null);
                }

                //マーカーの作成
                destMarker = new google.maps.Marker({
                    icon: new google.maps.MarkerImage('img/blue-pushpin.png'),
                    map : map ,
                    position : targetPos
                });
                destMarker.setMap(map);

                //現在位置とマーカーの徒歩でのルート検索
                requestRoute( currentPos , targetPos );

            }

            //徒歩でのルート検索
            /*-------------------------------------------------------------------*/
            function requestRoute( from , dest ){

                //リクエスト作成
                var request = {
                    origin : from,
                    destination : dest,
                    travelMode:google.maps.DirectionsTravelMode.WALKING
                };

                //サービスの作成
                var directionsService = new google.maps.DirectionsService();
                directionsService.route( request , callback_direction );

                //コールバック
                function callback_direction( result , status ){

                    //OKの場合
                    if( status == google.maps.DirectionsStatus.OK ){

                        //すでにルートがある場合は削除する
                        if( directionsDisplay ){
                            directionsDisplay.setMap(null);
                        }

                        //マップにルートを描画
                        directionsDisplay = new google.maps.DirectionsRenderer( {
                            suppressMarkers:true,
                            "map" : map
                        });
                        directionsDisplay.setDirections( result );

                        //console.log( result );

                        //テキストエリアに整形して挿入
                        $("#result_from").html("始点:" + result.routes[0].legs[0].start_address );
                        $("#result_to").html("終点:" + result.routes[0].legs[0].end_address );

                        //1km = 40kcalとして計算
                        var distance  = result.routes[0].legs[0].distance.value;
                        var cal = parseInt( result.routes[0].legs[0].distance.value / 1000 * 40 , 10 );
                        var distanceText = result.routes[0].legs[0].distance.text;
                        var durationText = result.routes[0].legs[0].duration.text;
                        $("#result").html("距離:" + distanceText + "<br/>時間:"+ durationText + "<br/>消費カロリー:" + cal + "kcal" );

                    }

                }

            }

            //初期化
            init();

        });

    </script>
    <style type="text/css">
        html {
            height: 100%;
        }
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map_canvas{
            width: 100%;
            height: 100%;
        }

        #result_from,
        #result_to,
        #result{
            position: absolute;
            left: 80px;
            padding: 3px;
            z-index: 100;
            border: 1px solid gray;
            border-radius: 4px;
            opacity: 0.9;
            background: #fff;
            line-height: 1;
            font-size: 14px;
        }
        #result_from{
            top:20px;
            height: 1em;
        }
        #result_to{
            top:50px;
            height: 1em;
        }
        #result{
            line-height: 1.5;
            top: 80px;
            height: 63px;
        }

        /*現在位置をかっこよく*/
        @-moz-keyframes pulsate {
            from {
                -moz-transform: scale(0.25);
                opacity: 1.0;
            }
            95% {
                -moz-transform: scale(1.3);
                opacity: 0;
            }
            to {
                -moz-transform: scale(0.3);
                opacity: 0;
            }
        }
        @-webkit-keyframes pulsate {
            from {
                -webkit-transform: scale(0.25);
                opacity: 1.0;
            }
            95% {
                -webkit-transform: scale(1.3);
                opacity: 0;
            }
            to {
                -webkit-transform: scale(0.3);
                opacity: 0;
            }
        }

        #map_canvas div[title="現在地"] {
            -moz-animation: pulsate 1.5s ease-in-out infinite;
            -webkit-animation: pulsate 1.5s ease-in-out infinite;
            border:1pt solid #fff;
            /* make a circle */
            -moz-border-radius:51px;
            -webkit-border-radius:51px;
            border-radius:51px;
            /* multiply the shadows, inside and outside the circle */
            -moz-box-shadow:inset 0 0 5px #06f, inset 0 0 5px #06f, inset 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f;
            -webkit-box-shadow:inset 0 0 5px #06f, inset 0 0 5px #06f, inset 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f;
            box-shadow:inset 0 0 5px #06f, inset 0 0 5px #06f, inset 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f;
            /* set the ring's new dimension and re-center it */
            height:51px!important;
            margin:-18px 0 0 -18px;
            width:51px!important;
        }

        @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (device-width: 768px) {
            #map_canvas div[title="現在地"] {
                margin:-10px 0 0 -10px;
            }
        }

    </style>
</head>
<body>
<div id="map_canvas"></div>
<div id="result"></div>
<div id="result_from"></div>
<div id="result_to"></div>
</body>
</html>

応用例として、観光地と連動して、現在位置から歩いて10分以内、もしくは200キロカロリーの場所におもしろい場所がないか簡単に分かるアプリとかいいかなっと