現在地をホームページ地図上に表示する

交通案内ページに、地図画像を掲載しているホームページが結構あります。ぱっと見たときの印象は、おそらくプロのデザイナー作成した画像が優れていると思われます。ですが、訪問者の利便性を高めたい場合は、画像よりも、地図アプリを活用したほうがよいこともあります。たとえば、オープンストリートマップの地図を表示すると、以下のように、現在地からの距離も計算できます。

上は、一般社団法人東海中小企業支援協会の例です。

現在地を表示できる

会社の場所は頻繁に変わるものではないですね。一方で自分が今いる場所はその時その時で異なります。そうすると、今いる場所から会社までどれくらい距離があるのか、を知ることができると嬉しいですね。

このような考えで、弊社へのアクセスページでは、ホームページ閲覧者の現在地を地図上に表示し、また現在地から弊社所在地までの距離も表示するようにしました。

Geolocation APIの利用

閲覧者の位置情報は、Geolocation APIを利用して処理しています。主要なブラウザが対応していますが、ブラウザのバージョンが古い場合は対応していないかもしれません。

位置情報を取得する処理は、HTMLクイックリファレンスを参考にしました。

※閲覧者が位置情報を提供する・しないを選択できます。しないを選択した場合は、地図上に現在地を表示しません。

    var lat = $("div.maparea").data("lat");
    var lng = $("div.maparea").data("lng");

    function successCallback(position) {
        var point = L.latLng(lat, lng);
        var point1 =  L.latLng(position.coords.latitude, position.coords.longitude);
        var distance = L.CRS.Earth.distance(point, point1);
        $("#distance").text(parseInt(distance)+' m');
        map.fitBounds(
            [point, point1]
        );

        var currentPosition = L.icon({
            iconUrl: 'https://rescuework.nagoya/application/files/5415/1736/9129/current-position.png',
            iconSize: [32, 32],
            iconAnchor: [13, 32],
        });
        var markers = L.marker(
           point1, {icon: currentPosition}
        ).addTo(map);
    }

    /***** 位置情報が取得できない場合 *****/
    function errorCallback(error) {
        var err_msg = "";
        switch(error.code)
        {
            case 1:
                err_msg = "位置情報の利用が許可されていません";
                break;
            case 2:
                err_msg = "デバイスの位置が判定できません";
                break;
            case 3:
                err_msg = "タイムアウトしました";
                break;
        }
        document.getElementById("show_result").innerHTML = err_msg;
        //デバッグ用→ document.getElementById("show_result").innerHTML = error.message;
    }
    $('#currentlocation').click(function(e){
        e.preventDefault();
        navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
    });

地図上への表示

地図上への表示はleaflet.jsで行っています。上のコードのsuccessCallbackの中の処理が、地図上への表示処理になります。

        var point = L.latLng(lat, lng); // 会社の位置情報
        var point1 =  L.latLng(position.coords.latitude, position.coords.longitude); // 閲覧者の位置情報
        var distance = L.CRS.Earth.distance(point, point1); // 距離を計算
        $("#distance").text(parseInt(distance)+' m'); // 距離を画面に表示
        map.fitBounds(
            [point, point1]
        ); // 会社と、閲覧者の位置が地図に収まるように、地図の拡大率を調整
        (略)
        var markers = L.marker(
           point1, {icon: currentPosition}
        ).addTo(map); // 閲覧者の位置に画像を挿入

というようにしています。

※追記※2018年02月14日
https接続で無い場合、多くのブラウザがGeolocation APIを無効にする(位置情報送信しない)ようです。上記コードを使用する場合は、https接続にすることを推奨します。

記事公開日: 2018年02月13日
#

オリジナルデザインを持ちたい人や、既にオリジナルデザイン... 詳細はこちら

#

ホームページのデータのバックアップを自動化するプログラム... 詳細はこちら

#

通常は、検索キーワードを入力してから、検索ボタンを押すと... 詳細はこちら