Googleマップをサイトに埋め込む！外部APIというものを使ってみようじゃないか

外部APIというものを使ってみたくこの度チャレンジしてみた。

アプリケーション・プログラミング・インターフェースの略称らしい。

    https://cloud.google.com/

早速上記にアクセス


![スクリーンショット 2025-02-19 23.40.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3978958/97f3fc1b-1824-474b-a7ca-395a2840c6ca.png)

コンソールを開きます。
最初に登録が必要だった。

クレジットカードの番号も入れなければいけず、、、他に方法はないもんかと５秒くらい考えてしまった。

だが、課金ボタンを有効にしない限りは無料の範囲内だけでしか使われないと記載があった。
のでそれを信じるしかない。

![スクリーンショット 2025-02-19 23.42.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3978958/30056e8c-5233-4f67-a7a5-b5cf013e4e1a.png)

とりあえずかなり無料のクレジットがあることは分かった。
20,000円/月のクレジットが付与されるみたい。

十分だ。いくら掛かるのか知らないけれど。

GoogleCloudの横に**My Maps Project**があるのでクリックして新規プロジェクトを作成。
スクショしようとすると色々漏れそうなので割愛。

![スクリーンショット 2025-02-19 23.47.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3978958/4e7d9300-7370-452f-b4ae-7ba5b7e2f353.png)

ハンバーガーメニューを開いて

APIとサービス＞認証情報

![スクリーンショット 2025-02-19 23.48.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3978958/f692288f-d7bd-4653-a03d-8e4aef3181b6.png)

**鍵を表示します**

でAPIキーを取得できる。

今回もLaravelプロジェクトをDockerで作成した。
git hubに接続できなかったんだけどね。
割愛！
.envファイルに下記を追加

    GOOGLE_MAPS_API_KEY=APIキーをここに貼り付け

これはscript使う時に呼び出す！
そしてview/map.bladeを作成する。

※コメントアウトを全部//で記載しています。
ですが本来はHTML,CSSそれぞれ記法が違いますがあしからず。


    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Google Maps Example</title>
        <style>
            //地図のサイズを指定
            #map {
                height: 500px;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <h1>Google Maps を表示するテストページ</h1>
        //divにidを指定して、のちのscriptを当てる。
        <div id="map"></div>
    
        //スクリプトでAPIを読み込み
        //srcはよく使うURL指定するやつ
        //{{}}はPHPの変数を埋め込むための使い方。
        //&callback=initMapは読み込み後にiniMapを呼ぶ。
        <script
            src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}&callback=initMap"
            //読み込み完了後にすぐ実行
            async
            //Google Maps　API推奨。なかったら忠告出てきた気がする。
            defer>
        </script>
    
        <script>
            // 地図の関数
            function initMap() {
                // 地図の中心座標を設定。今回は東京駅
                var tokyoStation = { lat: 35.681236, lng: 139.767125 };
                // 地図を表示
                //new google.maps.MapはAPIが提供しているクラス。
                //id=mapの要素を取得して
                var map = new google.maps.Map(document.getElementById('map'), {
                    //zoomは拡大レベル
                    zoom: 14,
                    //centerで地図の真ん中に座標が来るように指定
                    center: tokyoStation
                });
                // 赤マーカーセット
                var marker = new google.maps.Marker({
                    position: tokyoStation,
                    map: map
                });
            }
        </script>
    </body>
    </html>


これだけで表示ができた。


![スクリーンショット 2025-02-19 14.35.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3978958/f0195fe2-b6c1-4737-a544-1023e679c72d.png)



この後赤マーカーのところに天気の情報を載せようと思っていたが、かなり難航。。。

とりあえず綺麗にできたところまではここまで。

HPにGoogleマップを付けている場所は無料の範囲内で頑張ってるってことなのかな？

他にもこの機能を使ってユーザーの現在地からのルート検索が出来たりできるみたい。

表示するだけだったら意外と簡単だった。
.envにトークン追加して、viewで呼ぶだけ。

↑
viewに直でkey書いてもいいだろうけどwebサイトに載せる場合デベロッパーツールからトークン盗まれちゃうかもしれないから気をつけないとね。(ローカルだから関係ないけど)


もしかして他のサイトで管理甘かったりするとtoken直書きのサイトもあるのかもしれない。