はじめに

こんにちは、未経験からエンジニア転職を目指しているものです。
オンラインスクールで本格的に学習して6ヶ月目に入りました。PHP,Laravelを学習しポートフォリオを作成中です。ポートフォリオ作成手順及び、エラー内容を中心に記録していこうと思います。今回は投稿画面にGoogle Maps APIを埋め込む手続きを行いました。

概要

Laravel Sailを使った開発環境で、Google Maps APIを利用して地図を描画しようとした際に、いくつかの問題に直面しました。

google.maps.Markerを使用した際に問題が発生、その原因
AdvancedMarkerElementで地図描画に成功
Laravel Sail環境でnpmを使ったモジュール管理の導入、その効果
環境変数VITE_GOOGLE_MAPS_API_KEYの必要性

経緯と問題点

1. `google.maps.Marker`使用時に問題が発生

初めは、google.maps.Markerを使って地図上にピンを立てようとしました。しかし、以下のような問題に直面しました：

エラーメッセージ：「InvalidValueError: initMap is not a function」やREQUEST_DENIEDが表示される
原因：最新のGoogle Maps APIでは、AdvancedMarkerElementが推奨されており、古いgoogle.maps.Markerは非推奨になりつつあることが判明。

これを解決するために、公式ドキュメントに従い、AdvancedMarkerElementを使用することにしました。

2. `AdvancedMarkerElement`で解決

AdvancedMarkerElementを使用することで以下の問題を解決できました：

非推奨APIではなく、最新のAPIに対応
エラーメッセージが解消され、地図描画とピンの設置が期待通りに動作

コード例

import { Loader } from "@googlemaps/js-api-loader";

const loader = new Loader({
    apiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY, // Google Maps APIキー
    libraries: ["places"], // 必要なライブラリ
});

loader.load().then(() => {
    const initialPosition = { lat: 35.6895, lng: 139.6917 }; // 東京
    const map = new google.maps.Map(document.getElementById("map"), {
        center: initialPosition,
        zoom: 15,
    });

    new google.maps.marker.AdvancedMarkerElement({
        position: initialPosition,
        map: map,
        title: "選択した場所",
    });
});

3. Viteを使用してJSをビルドする仕組み

今回のプロジェクトでは、laravel-vite-pluginを導入してGoogle Maps APIの@googlemaps/js-api-loaderを管理しました。npm installで簡単にモジュールを追加し、Viteを使用してJavaScriptをビルドする仕組みにしました。

関連ファイルの設定
vite.config.js

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import dotenv from "dotenv";

dotenv.config();

export default defineConfig({
    plugins: [
        laravel({
            input: ["resources/css/app.css", "resources/js/app.js"],
            refresh: true,
        }),
    ],
});

.env

VITE_GOOGLE_MAPS_API_KEY=your_api_key_here

4. 環境変数VITE_GOOGLE_MAPS_API_KEYの必要性

Google Maps APIキーを直接コードに記述するのはセキュリティリスクがあります。そのため、.envファイルを使用してAPIキーを環境変数として設定し、import.meta.envで参照する方法を採用しました。

ポイント

.envファイルにVITE_GOOGLE_MAPS_API_KEYを記載
vite.config.jsでdotenvを使用して環境変数を読み込む
JavaScript内でimport.meta.env.VITE_GOOGLE_MAPS_API_KEYとして参照

最終的な成果

以下のことが実現できました：

最新のAdvancedMarkerElementを使用して地図を正しく描画
Laravel Sail環境でnpmモジュール管理を導入し、Viteを使ってモダンなフロントエンドビルドを実現
セキュアなAPIキー管理方法を採用

まとめ

今回のプロジェクトでは、Google Maps APIとLaravel Sailの組み合わせに関するいくつかの課題を解決しました。AdvancedMarkerElementを使用し、npmモジュール管理を適切に導入することで、開発体験が大幅に向上しました。

最後まで、ご視聴頂きありがとうございます。