LoginSignup
6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@krnsk17

ZENRIN Maps APIとGoogle Maps APIのバリアフリー歩行者ルート検索の違い

Posted at

要約

本記事では、ZENRIN Maps APIとGoogle Maps APIを使用してバリアフリーに対応した歩行者ルートを検索の違いを比較します。
ZENRIN Maps APIは、バリアフリールートの検索機能を提供しており、特定の条件下で有効です。
一方、Google Maps APIは、バリアフリーに関する直接的なオプションは提供していませんが、代替手段を通じてある程度の対応が可能です。
それぞれのAPIの実装方法や特徴を解説しています。

はじめに

バリアフリーの歩行者ルート検索は、高齢者、障がいを持つ方、ベビーカー利用者など、移動に制約のある人々にとって非常に重要です。
本記事では、ZENRIN Maps APIとGoogle Maps APIを用いて、このバリアフリールート検索を実装し、それぞれのAPIの特性と実装方法を比較検討します。

対象読者

  • バリアフリー地図アプリケーションの開発に関心のある方
  • 経路探索APIの選定に悩んでいる方
  • ZENRIN Maps APIとGoogle Maps APIの違いを詳しく知りたい方

ZENRIN Maps APIを使用したバリアフリーの歩行者ルート検索

実装概要

ZENRIN Maps APIを利用して、特定の出発地点から目的地点までの歩行者ルートを検索し、バリアフリーを考慮した歩行者ルート検索を実装しました。
ZENRIN Maps APIを使用するためには検証用IDとPW取得が必要です。
お試しIDは下記から簡単に発行できました。
ZENRIN Maps API　無料お試しID　お申込みフォーム（2か月無料でお試しできます）

詳細手順はこちらを参照しました。

実装コード

ZMALoader.setOnLoad(function(mapOptions, error) {
    if (error) {
        console.error('ZMALoader error:', error);
        return;
    }

    const mapElement = document.getElementById('map');
    mapOptions.center = new ZDC.LatLng(35.465833, 139.622778);
    mapOptions.zoom = 17;

    const map = new ZDC.Map(mapElement, mapOptions, function() {
        console.log('Map initialized successfully');

        // コントロールを追加
        map.addControl(new ZDC.ZoomButton('top-left'));
        map.addControl(new ZDC.Compass('top-right'));
        map.addControl(new ZDC.ScaleBar('bottom-left'));

        const start = new ZDC.LatLng(35.465833, 139.622778); //横浜駅
        const end = new ZDC.LatLng(35.46202838, 139.62674483); //新高島駅

        const startMarker = new ZDC.Marker(start);
        const endMarker = new ZDC.Marker(end);
        map.addWidget(startMarker);
        map.addWidget(endMarker);

        const routeUrl = `https://{ドメイン}/route/route_mbn/walk?search_type=5&from=${start.lng},${start.lat}&to=${end.lng},${end.lat}&llunit=dec&datum=JGD`;

        fetch(routeUrl, {
            method: 'GET',
            headers: {
                'x-api-key': '{APIキー}',
                'Authorization': 'ip'
            },
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            console.log('API Response:', JSON.stringify(data, null, 2));
            if (data.status === 'OK') {
                if (data.result && data.result.item && data.result.item.length > 0) {
                    const routeItem = data.result.item[0];
                    console.log('Route item:', JSON.stringify(routeItem, null, 2));

                    if (routeItem.route && routeItem.route.section && Array.isArray(routeItem.route.section)) {
                        const sections = routeItem.route.section;
                        console.log('Sections:', JSON.stringify(sections, null, 2));
                        const decodedPath = [];
                        sections.forEach(section => {
                            if (section.link && Array.isArray(section.link)) {
                                section.link.forEach(link => {
                                    if (link.line && link.line.coordinates) {
                                        link.line.coordinates.forEach(coord => {
                                            decodedPath.push(new ZDC.LatLng(coord[1], coord[0]));
                                        });
                                    }
                                });
                            }
                        });

                        if (decodedPath.length > 0) {
                            console.log('Decoded path:', decodedPath);
                            const routeLine = new ZDC.Polyline(decodedPath, {
                                color: '#008dcb',
                                width: 5,
                                opacity: 0.7
                            });
                            map.addWidget(routeLine);
                            console.log('Route line added to map');

                            const bounds = new ZDC.LatLngBounds();
                            decodedPath.forEach(point => bounds.extend(point));
                            map.fitBounds(bounds);
                        } else {
                            console.error('デコードされたパスが空です。sections:', JSON.stringify(sections, null, 2));
                        }
                    } else {
                        console.error('ルートセクションデータが不正です:', routeItem.route);
                    }
                } else {
                    console.error('ルートアイテムが見つかりません:', data.result);
                }
            } else {
                console.error('APIステータスがOKではありません:', data.status);
            }
        })
        .catch(error => {
            console.error('ルート検索エラー:', error);
        });
    }, function() {
        console.error('地図の生成に失敗しました');
    });
})

実装結果と課題

  • 結果：ZENRIN Maps APIを使用することで、バリアフリーを考慮したルートを地図上に表示できました。
    search_type=5を使用することで、APIがバリアフリーに配慮したルートを返すことができました。

  • 課題：バリアフリーの基準が明確でないため、実際にどのような経路が選択されているかの検証が必要そうです。

Google Maps APIを使用したバリアフリーの歩行者ルート検索

実装概要

Google Maps APIを使用して、出発地点から目的地点までの歩行者ルートを検索し、地図上に表示する機能を実装しました。

実装コード

<script>
function initMap() {
    const map = new google.maps.Map(document.getElementById("map"), {
        center: { lat: 35.465833, lng: 139.622778 },
        zoom: 15,
    });

    const directionsService = new google.maps.DirectionsService();
    const directionsRenderer = new google.maps.DirectionsRenderer();
    directionsRenderer.setMap(map);

    const request = {
        origin: new google.maps.LatLng(35.465833, 139.622778),
        destination: new google.maps.LatLng(35.46202838, 139.62674483),
        travelMode: google.maps.TravelMode.WALKING,
    };

    directionsService.route(request, (result, status) => {
        if (status === 'OK') {
            directionsRenderer.setDirections(result);
            const route = result.routes[0].legs[0];
            document.getElementById('distance').textContent = '総距離: ' + route.distance.text;
            document.getElementById('duration').textContent = '所要時間: ' + route.duration.text;

            const steps = route.steps;
            const routeSteps = document.getElementById('route-steps');
            steps.forEach(step => {
                const li = document.createElement('li');
                li.innerHTML = step.instructions + ' (' + step.distance.text + ')';
                routeSteps.appendChild(li);
            });
        } else {
            console.error("ルート検索に失敗しました: " + status);
        }
    });
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key={APIキー}&callback=initMap" async defer></script>

実装結果と課題

  • 結果：Google Maps APIを使用して、基本的な歩行者ルートを地図上に表示し、距離や所要時間などの情報を提供できました。
  • 課題：Google Maps APIはバリアフリーに関する直接的なオプションを提供していないため、階段や段差を避けたルートを自動的に選択することはできません。

地図表示

  • ZENRIN Maps API
    zma_BarrierFree.png

  • Google Maps API
    gma_BarrierFree.png

API比較

  • バリアフリー対応：ZENRIN Maps APIは、バリアフリールートの検索機能を直接提供しており、search_type=5を使用することでバリアフリーに配慮したルートを返すことができます。
    一方、Google Maps APIは直接的なバリアフリーオプションを提供していませんでした。
  • カスタマイズ性：Google Maps APIは豊富なドキュメントと広範なコミュニティサポートがあり、カスタマイズの幅が広いです。
    ZENRIN Maps APIは日本国内に特化した詳細な地図情報を提供しています。
  • 使いやすさ：Google Maps APIは世界中で広く使われており、導入しやすいです。
    ZENRIN Maps APIは日本国内での利用に特化しており、日本語のサポートが充実しています。
  • データ：ZENRIN Maps APIは日本国内の詳細な地図情報を提供しており、特に都市部での精度が高いです。
    Google Maps APIはグローバルなカバレッジを持ち、世界中の地図データを提供していますが、日本国内の細かい情報については、ZENRIN Maps APIの方が優れている場合がありそうです。

まとめ

ZENRIN Maps APIとGoogle Maps APIを使用して、バリアフリーの歩行者ルート検索を実装しました。
ZENRIN Maps APIは屋根付きルートの検索が可能で日本国内の詳細な地図情報を提供する一方、Google Maps APIは世界中で広く使われており、豊富なドキュメントとコミュニティサポートがあります。プロジェクトの要件、利用可能なデータ、開発リソースなどを考慮し、最適なAPIを選択してください。

6
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?