開志専門職大学Advent Calendar 2024

GCPのMaps JavaScript APIを体験してみた

Last updated at 2024-12-25Posted at 2024-12-25

はじめに

こんにちは。
APIの勉強を始めたばかりで、よく分かっていないため、とりあえず実際に使ってみようと思います。
そこで今回は、以前から気になっていた3大クラウドサービスの1つのGCPを、初心者なりに利用したので、ご参考になればと思います。

3大クラウドサービスとは

本題に入る前に、3大クラウドサービスをご存知でしょうか？
3大クラウドサービスとは、AmazonやGoogle、Microsoftが提供しているクラウドサービスで、Amazon Web Services（AWS）、Google Cloud Platform（GCP）、Microsoft Azure（Azure）のことを指します。
これらのサービスは、2024年第2四半期で、世界中のクラウドサービスマーケットシェアの約63%を占めるほど、圧倒的な利用率を誇っています。
特にこの中でも、AWSが約33%の利用率で、1番利用されています。

今回GCPを選んだ理由

その中でも今回、GCPを利用しようと思った理由は、ズバリ
私がGoogleのサービスをよく利用しているからです。
同じ企業が作っているサービスだとメニュー画面などのインタフェースも似た作りになっていることが多いので、覚えることが余計に増えない分少しでも理解しやすいかな、と思いました。

Maps JavaScript APIを使ってみた

では、ここからは実際にマップ関連のAPIを利用したので、それを順を追って記載します。
各APIには、公式のドキュメントがあるので、基本的にはそれを基に進めております。
参考：Maps JavaScript APIのドキュメントページ

※今回使用した範囲では、無料分で済みましたが、従量課金制のため、使用量や他のAPIを使用する時は、各自確認してご利用ください。

1. Google Cloud Platformにアクセスし、アカウントを作成する

下記URLにアクセスし、無料トライアルを試すをクリック
Google Cloud Platform：https://console.cloud.google.com/

Google Cloud Platformのアカウント情報の作成画面が出るので、内容を確認した後、同意して続行をクリック
お支払いプロファイルやお支払い方法を入力後、無料で利用開始をクリック
作成し終わったら、このように表示されました

2. Maps JavaScript APIの有効化

左上のナビゲーションメニューをクリック
出てきたメニューの中のAPIとサービス-ライブラリをクリック
以下のような画面が出るので、今回使用するMaps JavaScript APIをクリック
※もし出てきていない場合は、検索欄での検索やすべて表示ボタンをクリックするなどで出てくると思います。
下記画面になるので、有効にするをクリック
有効にするをクリック後、以下の画面に遷移

3. APIキーが発行されているか確認

左側のメニューから、鍵と認証情報をクリックし、さらに、APIキーのMaps Platform API Keyをクリック
下記画面が表示され、右側の詳細情報にAPI Keyが表示される
※今回は、この画面では特に何もしないが、ここで各種制限の設定によるセキュリティ対策ができる様子

4. コード作成

上記画面のAPIとサービスをクリック
ページ中段あたりにあるMaps JavaScript APIのGuidesをクリック
以下のようなMaps JavaScript APIのドキュメントページに遷移
左側のメニューから、APIキーを使用するをクリックし、ページ下部にあるリクエストにAPIキーを追加するのコードを確認
上記コードを基にVSコード等のテキストエディタでHTMLファイルを作成
なお、YOUR_API_KEYには、先ほど確認したご自身のAPIキーを入れてください
※サンプルコードは、記事の下のほうに載せます。
ドキュメントに戻り、左側メニューのJavaScript HTMLを使用するマーカーが配置された Googleマップを追加するをクリックし、ページ下部のコードサンプルの全文のJavaScriptタブで開いたコードを確認
先ほどのコードサンプルを追加し、bodyタグの最初にid="map"を入れたdivタグも追加します
さらに、表示を考慮して、CSSファイルの作成とheadタグ内にそのリンクの追加もします
※YOUR_API_KEYには、先ほど確認したご自身のAPIキーを入れてください

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="map"></div>
    <script>
        // Initialize and add the map
        let map;

        async function initMap() {
            // The location of Uluru
            const position = { lat: -25.344, lng: 131.031 };
            // Request needed libraries.
            //@ts-ignore
            const { Map } = await google.maps.importLibrary("maps");
            const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

            // The map, centered at Uluru
            map = new Map(document.getElementById("map"), {
                zoom: 4,
                center: position,
                mapId: "DEMO_MAP_ID",
            });

            // The marker, positioned at Uluru
            const marker = new AdvancedMarkerElement({
                map: map,
                position: position,
                title: "Uluru",
            });
        }
        initMap();
    </script>

    <script>
        (g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
            key: "YOUR_API_KEY",
            v: "weekly",
            // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
            // Add other bootstrap parameters as needed, using camel case.
        });
    </script>
</body>

</html>

style.css

@charset "utf-8";

#map {
    width: 900px;
    height: 600px;
}

5. 実行

・・・・・・何も出ない・・・・・

エラー内容を確認

googleが定義されていない・・・？
ということで、自分のコードを確認しつつ、ドキュメントを読んだり、色々な記事や動画なども調査したのですが・・・よく分からない！
※記事や動画は、おそらく古いドキュメントを参考にしているものが多かったので、最新のドキュメントには対応していなかったように思いました。
ありがちなエラーへの対応
後日、改めて考えたときに、HTMLやJavaScriptを書いているときによく起こるエラーの原因といえば、「記述する順番が違う」 という経験があったのを思い出したので、一旦、APIキーの箇所とマップやマーカー生成の箇所の順番を逆にしたコードにして、実行

出た・・・
つまり、今回の[googleが定義されていない]は、おそらく、APIを利用する前に、マップやマーカーの生成コードを書いてしまっていたことが原因で、「まだAPIを利用できていないよ」ということだったのでしょう。
修正後のHTMLファイル
※YOUR_API_KEYには、先ほど確認したご自身のAPIキーを入れてください

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="map"></div>

    <script>
        (g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
            key: "YOUR_API_KEY",
            v: "weekly",
            // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
            // Add other bootstrap parameters as needed, using camel case.
        });
    </script>

    <script>
        // Initialize and add the map
        let map;

        async function initMap() {
            // The location of Uluru
            const position = { lat: -25.344, lng: 131.031 };
            // Request needed libraries.
            //@ts-ignore
            const { Map } = await google.maps.importLibrary("maps");
            const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

            // The map, centered at Uluru
            map = new Map(document.getElementById("map"), {
                zoom: 4,
                center: position,
                mapId: "DEMO_MAP_ID",
            });

            // The marker, positioned at Uluru
            const marker = new AdvancedMarkerElement({
                map: map,
                position: position,
                title: "Uluru",
            });
        }
        initMap();
    </script>


</body>

</html>

まとめ

今回、GCPの1つのAPIだけではありますが、経験することができたので、クラウドサービスの利用のハードルが少し下がった気がします。
また、今回でいえば、HTMLやCSS、JavaScriptの知識があったほうが理解しやすいものだったと思いますが、公式ドキュメントのサンプルコードを利用することで、ある程度の形は簡単に作成できるように感じました。
一方で、ドキュメントは随時更新されているようなので、過去の記事や動画などが参考にならないケースもあると思います。その点には注意しましょう。

参考

続きの記事：GCPのMaps JavaScript APIを体験してみた2

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up