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

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

# Maps JavaScript APIを利用して、大学の表示とアイコンの変更をしてみた
今回も前回同様、公式ドキュメントを参考に進めていきます。
参考：[Maps JavaScript APIのドキュメントページ](https://developers.google.com/maps/documentation/javascript?hl=ja)

### 1.大学の表示 
前回作成したコードのうち、positionの内容のところが、緯度・経度を表すようなので、そこを大学のものに合わせていきます
- Google Mapで、開志専門職大学を検索して、その上で右クリックをすると、一番上に緯度・経度を表す数値が出てきます
![スクリーンショット 2024-12-25 15.37.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3964476/f4a36756-9111-e63f-0077-b8438a2a6fea.png)
- 上記の値を前回作成したコードのpositionのそれぞれに入力していきます
``` html
const position = { lat: 37.90825, lng: 139.06184 };
```
- 下記画面のzoomの数値を変更することで、mapの拡大縮小ができるので、ちょうど良い大きさに変更します
``` html
map = new Map(document.getElementById("map"), {
    zoom: 16,
    center: position,
    mapId: "DEMO_MAP_ID",
});
```
- 実行結果

![スクリーンショット 2024-12-25 18.13.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3964476/723a2850-932d-3f85-7266-907a0741bfd0.png)
問題なく反映されました！

### 2.アイコンの変更
- アイコンを変更するために、コードを追加します
ドキュメントの左側のメニューの`画像を使ったマーカーを作成する`をクリックし、`カスタム画像ファイルを使用する`のところの`JavaScript`タブ内のコードを利用します
下記画面のオレンジの枠で囲んだところが、新規に追加する必要があるコードです
![スクリーンショット 2024-12-25 17.46.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3964476/6b8603bf-c9d3-95a7-de6d-89c63b14ad71.png)


- 作成した変更後のコード
※1 `YOUR_API_KEY`には、ご自身のAPIキーを入れてください
※2 CSSファイルは、前回の記事を参考にしてください
``` html: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>
```
- 実行結果
![スクリーンショット 2024-12-25 17.45.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3964476/60ce3fe7-25dc-7ba3-6a9c-a2204317401a.png)
無事表示されました！

### 3.おまけ
先ほどの`beachFlagImg.src = "~~~"`の~~~のURLを変えれば、任意のアイコンにできます。せっかくなので、大学のロゴを利用してみました。
![スクリーンショット 2024-12-25 18.58.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3964476/220995a7-7e89-dbcd-5e1d-6b64eb157672.png)
画像が大きすぎて、かなりの面積を見えなくしてしまいました・・・
任意のアイコンにするときは、画像の大きさにも気をつけましょう。

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

# 参考
前回の記事：[GCPのMaps JavaScript APIを体験してみた](https://qiita.com/2012ataka/items/e035887c5560686420d0)