はじめに
こんにちは、未経験からエンジニア転職を目指しているものです。
オンラインスクールで本格的に学習して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モジュール管理を適切に導入することで、開発体験が大幅に向上しました。
最後まで、ご視聴頂きありがとうございます。