0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

開志専門職大学Advent Calendar 2024

Day 22

Google APIを使ってみた

Last updated at Posted at 2024-12-23

はじめに

今回はGoogle Map APIを使ってみました。
この記事では簡単なGoogle Map APIの使い方についてご紹介します。
今回の記事はこちらの動画を参考にさせていただきました。

必要なもの

・VSコード
・Google アカウント

作業工程

※Googleアカウントがない人は事前に作成してください。
今回は
APIキーの取得(手順は動画参照)
   ↓
htmlのコードの作成(基本は動画参照、追加で機能を複数追加)
という手順で作成しました。
https://cloud.google.com こちらのURLでAPIキーを取得できます。

作成したAPIキーの使用してGoogle Mapを表示

今回はローカル環境でHTMLのファイルで作成しました。コードは下記のようになっています。
※動画より引用

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

<head>
    <meta charset="UTF-8">
    <title>Sample_GoogleMap</title>
    <style>
        html {
            height: 100%
        }

        body {
            height: 100%
        }

        #map {
            height: 100%;
            width: 100%
        }
    </style>
</head>

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

    <script src="http://maps.google.com/maps/api/js?key={自分のAPIキー}&language=ja"></script>
    <script>
        var MyLatLng = new google.maps.LatLng(35.6811673, 139.7670516);
        var Options = {
            zoom: 15, //地図の縮尺地
            center: MyLatLng, //地図の中心座標
            mapTypeId: 'roadmap' //地図の種類
        };
        var map = new google.maps.Map(document.getElementById('map'), Options)//マップをどこに表示させるか
    </script>
</body>

</html>

実行結果はこのようになっており東京駅付近のマップが画面全体に表示されました。
スクリーンショット 2024-12-19 10.21.13.png
このような画面が表示された場合は「Google Cloud」の支払い方法が設定されていないや設定ミス、HTMLコードのミスなどが考えられます。

scriptの中を編集すればカスタマイズが可能です。

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

<head>
    <meta charset="UTF-8">
    <title>Sample_GoogleMap</title>
    <style>
        html {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            height: 100%;
            width: 100%;
        }
    </style>
</head>

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

    <!-- Google Maps API -->
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDCx-e27FNd5pNgHA7sqT_LaFTRIvAmrpQ&language=ja"></script>
    <script>
        // 地図の基本設定
        var MyLatLng = new google.maps.LatLng(35.6811673, 139.7670516);
        var Options = {
            zoom: 15, // 地図の縮尺
            center: MyLatLng, // 地図の中心座標
            mapTypeId: 'roadmap' // 地図の種類
        };

        // 地図を描画
        var map = new google.maps.Map(document.getElementById('map'), Options);

        // マーカーの追加
        var marker = new google.maps.Marker({
            position: MyLatLng, // マーカーの位置
            map: map, // 地図オブジェクト
            title: "東京駅" // ツールチップ
        });

        // 情報ウィンドウの設定
        var infoWindow = new google.maps.InfoWindow({
            content: "<h3>東京駅</h3><p>日本の主要な駅です。</p>"
        });

        // マーカークリックで情報ウィンドウを表示
        marker.addListener("click", function () {
            infoWindow.open(map, marker);
        });

        // 地図クリックイベントの追加
        map.addListener("click", function (event) {
            alert("クリックした座標: 緯度 " + event.latLng.lat() + ", 経度 " + event.latLng.lng());
        });

        // カスタムスタイルの適用
        var styledMapType = new google.maps.StyledMapType(
            [
                { elementType: "geometry", stylers: [{ color: "#ebe3cd" }] },
                { elementType: "labels.text.fill", stylers: [{ color: "#523735" }] },
                { elementType: "labels.text.stroke", stylers: [{ color: "#f5f1e6" }] },
                {
                    featureType: "water",
                    elementType: "geometry",
                    stylers: [{ color: "#c9c9c9" }]
                }
            ],
            { name: "Custom Style" }
        );

        map.mapTypes.set("styled_map", styledMapType);
        map.setMapTypeId("styled_map");
    </script>
</body>

</html>

上のコードでは
マーカー: 東京駅にマーカーを表示。
情報ウィンドウ: マーカーをクリックすると「東京駅」の説明が表示。
クリックイベント: 地図をクリックした際に座標をアラート表示。
カスタムスタイル: 地図の見た目をカスタマイズ(色合いなど)
の機能を追加してみました。
実行結果はこのようになりました。
スクリーンショット 2024-12-19 10.30.56.png
クリックした場所の座標が表示されたり、東京駅にマーカーを表示させることに成功しました。
他にも使える機能があるので調べて追加してみてください。

最後に

最後までご覧いただきありがとうございました。
今回このGoogle map APIを使用してみた感想として、今はマーカー表示などが自分の限界でしたがもっと調べれば現在地から目的地までのルートを検索できたりさまざまな用途で活躍できるツールだと感じました。まだ習い始めたばかりですが少しずつ技術を身につけてWebサイトにアップロードできるようにしていきたいです。

改めて今回の記事はこちらの動画を参考にさせていただきました。ありがとうございました。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?