はじめに

先日、Maps JavaScript APIを体験してみたのですが（一番下の参考に記載）、様々な機能があるため、もう少しこのAPIを利用してみたいと思います。
今回は、前回の内容の続きとして、mapを我が開志専門職大学に合わせ、map上のアイコンも変えたいと思います。

Maps JavaScript APIを利用して、大学の表示とアイコンの変更をしてみた

今回も前回同様、公式ドキュメントを参考に進めていきます。
参考：Maps JavaScript APIのドキュメントページ

1.大学の表示

前回作成したコードのうち、positionの内容のところが、緯度・経度を表すようなので、そこを大学のものに合わせていきます

Google Mapで、開志専門職大学を検索して、その上で右クリックをすると、一番上に緯度・経度を表す数値が出てきます
上記の値を前回作成したコードのpositionのそれぞれに入力していきます

const position = { lat: 37.90825, lng: 139.06184 };

下記画面のzoomの数値を変更することで、mapの拡大縮小ができるので、ちょうど良い大きさに変更します

map = new Map(document.getElementById("map"), {
    zoom: 16,
    center: position,
    mapId: "DEMO_MAP_ID",
});

実行結果

問題なく反映されました！

2.アイコンの変更

アイコンを変更するために、コードを追加します
ドキュメントの左側のメニューの画像を使ったマーカーを作成するをクリックし、カスタム画像ファイルを使用するのところのJavaScriptタブ内のコードを利用します
下記画面のオレンジの枠で囲んだところが、新規に追加する必要があるコードです
作成した変更後のコード
※1 YOUR_API_KEYには、ご自身のAPIキーを入れてください
※2 CSSファイルは、前回の記事を参考にしてください

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 
            const position = { lat: 37.90825, lng: 139.06184 };
            // Request needed libraries.
            //@ts-ignore
            const { Map } = await google.maps.importLibrary("maps");
            const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

            // A marker with a with a URL pointing to a PNG.
            const beachFlagImg = document.createElement("img");

            beachFlagImg.src =
                "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";


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

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

</body>

</html>

実行結果

無事表示されました！

3.おまけ

先ほどのbeachFlagImg.src = "~~~"の~~~のURLを変えれば、任意のアイコンにできます。せっかくなので、大学のロゴを利用してみました。

画像が大きすぎて、かなりの面積を見えなくしてしまいました・・・
任意のアイコンにするときは、画像の大きさにも気をつけましょう。

まとめ

前回と今回で、Maps JavaScript APIの始め方、拡張の仕方に慣れてきた気がします。今回のような拡張機能を扱えるようになると、単にGoogle Mapの共有のiframeを利用したものよりも、リッチで高度なものを作成できそうです。
まだまだ様々な機能があり、最近だと3D地図の機能なども追加されているようなので、ちょっとでもこだわりを見せたい人は、ぜひこのAPIを活用してみてください。

参考

前回の記事：GCPのMaps JavaScript APIを体験してみた