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

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>