ホームページ上の地図に、現在地を表示し、目的地までの距離を算出する

ホームページ上に地図が掲載されていることはよくありますね。現在地から目的地まで、どれくらい距離があるのか、を調べたいケースもあります。

今回は、位置情報を利用して、現在地を地図に表示する、現在地から目的地までの距離を算出する、をやってみました。

geolocation

geolocation機能で、現在地を取ってくることができます。なお今回の記事は、
https://developer.mozilla.org/ja/docs/Web/API/Geolocation/getCurrentPosition を参考にして、作成しています。

ホームページ作成ソフト(CMS)にconcrete5を使っている都合で、concrete5で使うコードが入っています。

        // id="currentlocation" をクリックしたときに、現在地を取得する
        $('#currentlocation').click(function(e){
            e.preventDefault();
            navigator.geolocation.getCurrentPosition(ounziw_osm_successCallback, ounziw_osm_errorCallback);
        });

        // 現在地が取得できたときの処理
        function ounziw_osm_successCallback(position) {
            // point0が目的地。既に地図があって、そのマーカーの情報を取ってきている
            // <?php echo $unique_identifier?>は、concrete5ブロック識別用IDを出力する
            var point0 = L.latLng($('#map<?php echo $unique_identifier?>').data("markerlat"), $('#map<?php echo $unique_identifier?>').data("markerlng"));
            // point1 が現在地。
            var point1 =  L.latLng(position.coords.latitude, position.coords.longitude);

            // leaflet.js の機能を使って、2点間の距離を計算する
            var distance = L.CRS.Earth.distance(point0, point1);
            $("#distance").text(parseInt(distance)+' m');

            // 地図の縮尺を変更する。2点が収まる大きさにする。
            map.fitBounds(
                [point0, point1]
            );

            // 現在地の場所に、アイコンを置く
            var currentPosition = L.icon({
                // <?php echo $package_path;?>は、concrete5のパス出力する
                iconUrl: '<?php echo $package_path;?>images/current-position.png',
                iconSize: [32, 32],
                iconAnchor: [13, 32],
            });
            var markers = L.marker(
                point1, {icon: currentPosition}
            ).addTo(map);
        }

        // 現在地が取得できなかったときの処理
        function ounziw_osm_errorCallback(error) {
            var err_msg = "";
            switch(error.code)
            {
                case 1:
                    // <?php echo t('......');?> は、concrete5の多言語対応機能
                    err_msg = "<?php echo t('Location access is not allowed.');?>";
                    break;
                case 2:
                    err_msg = "<?php echo t('Current position is not obtained.');?>";
                    break;
                case 3:
                    err_msg = "<?php echo t('Timed out.');?>";
                    break;
            }
            document.getElementById("distance").innerHTML = err_msg;
        }

公式サイトで公開

concrete5の公式サイトで、Free Mapアドオンを公開しました。誰でも、ご自分のホームページなどに設置できます。

活用例

一般社団法人　東海中小企業支援協会、レスキューワーク株式会社などをごらんください。

動画

youtube に公開しています。
https://www.youtube.com/watch?v=oKEWAxCr_W0

注意点

位置情報を取得して送信するには、httpsでの接続が要求されるようです。(多くのブラウザで、http接続の場合は位置情報送信ができないように設定されています。)利用する場合は、https環境にてご利用ください。