こんにちは！
九保すこひです（フリーランスのITコンサルタント、エンジニア）

【X】九保すこひ＠フリーランスエンジニア

さてさて、以前このブログでも取り上げた地図ライブラリ「Leaflet」ですが、近年はOpenStreetMapの発展もあって、お店の情報も細かく記載されるようになりました。

結果として、精度を求めないなら（条件によっては有料の）Googleマップを使う必要はなくなってると感じています。

ただ、そうはいっても「Googleマップ」には強力な武器が１つあります。

それは・・・・・・

Google ストリートビュー

です。

皆さんも一度はご覧になったことがあると思いますが、「あたかもその場所にいるかのように」360度を見回すことができるパノラマ写真サービスのことですね。

※ 実はストリートビューの代替サービスとして以下のようなサービスも存在してはいるのですが、質としてはやはりGoogleには勝ててないというのが印象です。

そして、そんなストリートビューが役立つ場面というのが・・・・・・

土地勘がない場所の道順をチェックする場合

です。

つまり、事前にブラウザ内で「現地へ行って」おいて、どこをどっちに曲がるのかを確認できるということですね。

そこで

今回は、「Leaflet + Google ストリートビュー」を使って、地図上をクリックした道順をストリートビューで確認できる機能をつくってみたいと思います。

ぜひ何かの参考になりましたら嬉しいです。

「時計をして出かけたら、
変な日焼けになってしまいました…」

開発環境： Vue 3

目次 [非表示]

1 前提として
2 やりたいこと
3 道順をストリートビューで表示するコード
4 テストしてみる
5 デモページをつくりました
6 企業様へのご提案
7 おわりに

前提として

ストリートビューの埋め込み表示をするには、Google Cloudの「Maps Embed API」が実行できるAPIキーが必要になります。

もしまだの方は以下の記事を参考にして事前に取得しておいてください。

参考ページ： Google Embed Map の APIキーを取得する

やりたいこと

今回やりたいことは以下のとおりです。

地図上で道順をクリックできる
クリックした場所のストリートビューを表示
次の位置との角度を計算し、ストリートビューをその方向へ向ける

なお、今回は「大阪の難波駅 → なんばグランド花月へ行く」という想定にしていますので、初期位置は難波駅付近にします。（お好みで変更してください）

では実際にやってみましょう

道順をストリートビューで表示するコード

では、今回もクライアント・サイドのみで実装できますので、いきなりコードのご紹介です。

multiple_street_view.html

<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" rel="stylesheet">
    <style>

        #map, #street_view {

            width: 100%;
            height: 400px;
            border: 1px solid #777;

        }

    </style>
</head>
<body>
    <div id="app" class="p-5">
        <h3 class="mb-4">&#x1F5FA; ストリートマップを使った道順を表示するサンプル</h3>
        <div class="row">
            <div class="col-6">
                <div id="map"></div>
            </div>
            <div class="col-6">
                <div v-if="hasLocation">
                    <iframe
                        :src="streetViewUrl"
                        id="street_view"
                        class="mb-3"
                        allowfullscreen=""
                        loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade"></iframe>
                    <pagination
                        :page="page"
                        :locations="locations"
                        @move-page="onMovePage"></pagination>
                </div>
            </div>
        </div>
    </div>
    <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"></script>
    <script src="https://unpkg.com/vue@3.2.31/dist/vue.global.prod.js"></script>
    <script>

        const { createApp, ref, computed, onMounted, defineComponent } = Vue;
        const GOOGLE_MAP_API_KEY = '（ここにあなたの API キー）';

        // Component
        const paginationComponent = {
            template: `
                <div>
                    <button type="button" class="btn btn-primary me-2" :disabled="!hasPrev" @click="movePage('prev')">前へ</button>
                    <span v-text="page"></span> / <span v-text="locations.length"></span>
                    <button type="button" class="btn btn-primary ms-2" :disabled="!hasNext" @click="movePage('next')">次へ</button>
                </div>
            `,
            props: {
                page: {
                    type: Number,
                    required: true,
                },
                locations: {
                    type: Array,
                    required: true,
                },
            },
            emits: ['movePage'],
            setup(props, { emit }) {

                // Event
                const movePage = direction => {

                    const additionalPages = {
                        prev: -1,
                        next: 1,
                    };
                    const additionalPage = additionalPages[direction] || 0;
                    const page = props.page + additionalPage;

                    emit('movePage', { page }); // イベント送出（@move-page が実行される）

                };

                // Pagination
                const hasPrev = computed(() => {

                    return props.page > 1;

                });
                const hasNext = computed(() => {

                    const maxPage = props.locations.length;
                    return props.page < maxPage;

                });

                return {
                    movePage,
                    hasPrev,
                    hasNext,
                };

            }
        };

        createApp({
            setup() {

                // Data
                const page = ref(1);
                const locations = ref([]);
                let map = null;

                // Computed
                const hasLocation = computed(() => {

                    return locations.value.length > 0;

                });
                const streetViewUrl = computed(() => {

                    if(hasLocation.value === true) {

                        const index = page.value - 1;
                        const currentLocation = locations.value[index];
                        const { latitude, longitude } = currentLocation;
                        const hasNextPage = locations.value.length > page.value;
                        let heading = 0;

                        if(hasNextPage === true) { // 向いている方向を計算

                            const nextLocation = locations.value[index+1];
                            const dx = nextLocation.longitude - currentLocation.longitude;
                            const dy = nextLocation.latitude - currentLocation.latitude;
                            heading = 90 - Math.atan2(dy, dx) * 180 / Math.PI;

                        }

                        return `https://www.google.com/maps/embed/v1/streetview`+
                            `?key=${GOOGLE_MAP_API_KEY}&location=${latitude},${longitude}&heading=${heading}`;

                    }

                    return '';

                });

                // Methods
                const onMapClick = e => {

                    const latitude = e.latlng.lat;
                    const longitude = e.latlng.lng;

                    locations.value.push({
                        latitude,
                        longitude
                    });

                    L.marker([latitude, longitude]).addTo(map);

                };
                const onMovePage = e => {

                    page.value = e.page;

                };

                // Mounted
                onMounted(() => {

                    const defaultLocation = [34.66449642610138, 135.50271570682528]; // 大阪・難波駅の周辺
                    const zoomLevel = 17;
                    map = L.map('map').setView(defaultLocation, zoomLevel);

                    const tileLayerUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
                    const tileLayerAttribution = '<a target="_blank" href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
                    const layer = L.tileLayer(tileLayerUrl, { attribute: tileLayerAttribution });

                    map.addLayer(layer);
                    map.on('click', onMapClick); // クリックイベント

                });

                return {
                    page,
                    locations,
                    hasLocation,
                    streetViewUrl,
                    onMovePage,
                }

            }
        })
        .component('pagination', paginationComponent)
        .mount('#app');

    </script>
</body>
</html>