こんにちは❗フリーランス・コンサルタント＆エンジニアの九保すこひです。

X（Twitter）やってます！
📝 九保すこひ@フリーランスエンジニア｜累計300万PVのブログ運営中

さてさて、最近は少しでかけにくくなったものの、その昔はよく「電車 + 折りたたみ自転車」で各地を巡ってそれをブログ記事にしていました。

しかし、毎回ブログを書くたびに「うーん・・・」となることがありました。

それが・・・・・・

地図の埋め込み＆リンクをつくるのがメンドウ…😫

というものです。

「ゆるり旅」に出ると、いくつかの場所に行くのですが、その全ての地図を用意するのはなかなか大変なんですね。

そして、何か対策は無いかと考えたら、ひとつアイデアが浮かびました。

写真のGPSデータから自動的にマップを用意すればいいじゃないか

と。

そこで❗

今回はJavaScriptを使って、選択された写真のExifデータから「緯度経度」を取得し、そのデータで該当する場所のマップ・HTMLタグを用意できるようにしてみます。

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

「この前、消費カロリー 4,500 kcal でした。
普段 1,000 もいかないのに😂」

開発環境： Bootstrap 5、Vue 3、Google Map

1 Google Embed Map の APIキーを取得する
2 Exifデータを取得し、地図表示するコードをつくる
3 ちなみに 1： Google MapのAPIキーに制限をかける
4 ちなみに 2：スマホの写真にGPSが埋め込まれていない場合
5 デモを用意しました
6 企業様へのご提案
7 おわりに

Google Embed Map の APIキーを取得する

今回使う地図は、Google Map（埋め込み版）です。

そのため、まずはGoogle Embed Map APIが使えるように「APIキー」を取得しましょう。

※ ちなみにGoogle Embed Map APIは、2021.8.17現在、完全無料で使えます。

では、Google Cloud にログインし、ページ上部からプロジェクトを選びます（もしない場合はつくってください）

そして、ページ左上の「ハンバーガーボタン」をクリックしてメニューを表示し、「APIとサービス」をクリックします。

ページが移動したら、「APIとサービスの有効化」をクリック。

すると、APIの検索ページが表示されるので、「maps embed api」で検索し「Maps Embed API」をクリックします。

そして、「有効にする」ボタンをクリックすればOKです。

では次に、Maps Embed APIにアクセスするための「APIキー」を取得します。
ページ左側にあるメニューから「認証情報」をクリック。

ページが移動したら、「Map Embed API」を選択し、「認証情報を作成」をクリックしてください。

すると、ポップアップが表示されるので「APIキー」をクリックします。

するとポップアップが表示され、その中にAPIキーがあるのでこれをコピーして控えておいてください。

※ ちなみにこのAPIキーにはドメインなどの制限が入っていないため、どのサイトでも＆誰でも使えるようになっています。そのため、制限をかけたいかたは、「ちなみに 1： Google MapのAPIキーに制限をかける」を参考にしてみてください。

Exifデータを取得し、地図表示するコードをつくる

では、メインになるHTML＆JavaScriptのコードです。

<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="app" class="p-5">
    <strong class="h3">JavaScript でGPSデータを取得し、地図を表示するサンプル</strong>
    <hr class="mb-4">
    <div class="row">
        <div class="col-12">
            <label class="btn btn-outline-primary">
                ファイルを選択する
                <input type="file" class="form-control d-none" accept="image/jpeg" @change="onFileChange">
            </label>
        </div>
        <div class="col-4">
            <img class="img-fluid mt-3" :src="image">
        </div>
        <div class="col-4" v-if="hasExif">
            <label>緯度</label>
            <div class="border border-2 p-2 rounded mb-2" v-text="latitude"></div>
            <label>経度</label>
            <div class="border border-2 p-2 rounded" v-text="longitude"></div>
            <div class="mt-4 overflow-auto p-3 bg-light" style="height:300px;" v-if="hasExif">
                おまけ： 抽出された Exif データ
                <hr>
                <div v-for="(value,key) in exif">
                    <strong v-text="key"></strong>:
                    <span v-text="value"></span>
                </div>
            </div>
        </div>
        <div class="col-4" v-if="hasExif">
            <iframe
                    class="w-100"
                    height="450"
                    :src="googleMapEmbedUrl" allowfullscreen>
            </iframe>
            <textarea class="form-control mt-2" rows="5" v-text="googleMapEmbedTag"></textarea>
            <a :href="googleMapLinkUrl" class="btn btn-outline-primary mt-3" target="_blank">Googleマップで確認する</a>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue@3.1.1/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
<script>

    Vue.createApp({
        data() {
            return {
                exif: {},
                googleMapApiKey: '（ここにあなたのAPIキーを書き込む）'
            }
        },
        methods: {
            getExif(key) {

                try {

                    return this.exif[key];

                } catch(e) {}

                return '';

            },
            getGps(key) {   // `Latitude` or `Longitude`

                const gps = this.getExif('GPS'+ key);
                const ref = this.getExif('GPS'+ key +'Ref');

                if(gps instanceof Array) {

                    const degrees = gps[0];
                    const minutes = gps[1];
                    const seconds = gps[2];
                    let dd = degrees + minutes/60 + seconds/(60*60);

                    if (['S', 'W'].includes(ref)) { // 南半球、西経の場合はマイナス

                        dd *= -1;

                    }

                    return dd

                }

                return '';

            },
            onFileChange(e) {

                const files = e.target.files;

                if(files.length > 0) {

                    this.exif = {};
                    const file = files[0];
                    const reader = new FileReader();
                    reader.addEventListener('load', () => {

                        this.image = reader.result;
                        EXIF.getData(file, () => {  // Exif を取り出す

                            this.exif = EXIF.getAllTags(file);

                        });

                    });
                    reader.readAsDataURL(file);

                }

            }
        },
        computed: {
            hasExif() {

                return (Object.keys(this.exif).length > 0);

            },
            latitude() { // 緯度

                return this.getGps('Latitude');

            },
            longitude() { // 経度

                return this.getGps('Longitude');

            },
            googleMapEmbedUrl() {

                const key = this.googleMapApiKey;
                const latitude = this.latitude;
                const longitude = this.longitude;
                return `https://www.google.com/maps/embed/v1/place?key=${key}&q=${latitude},${longitude}`;

            },
            googleMapEmbedTag() {

                return `<iframe width="450" height="450" src="${this.googleMapEmbedUrl}" allowfullscreen></iframe>`;

            },
            googleMapLinkUrl() {

                const latitude = this.latitude;
                const longitude = this.longitude;
                return `https://www.google.com/maps/search/?api=1&query=${latitude},${longitude}`;

            }
        }
    }).mount('#app');

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