Maps JavaScript APIを使って地図が表示されない原因(更新の予定あり)

結果

・VScodeでファイルをブラウザで開く際に、Live Serverで開くべきところを相対パスで開いてたから。

経緯

・google plat formのマーカーが配置された Google マップをウェブサイトに追加するのサイトでJS,HTML,CSSのコードをコピペしたのにブラウザの検証ボタンで以下のエラー文が出たので

Access to script at 'file:///Users/eoiso/projects/google_mapTest/example/index.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

chatGPTに聞いてみた

このエラーメッセージは、ブラウザの同一オリジンポリシー（Same-Origin Policy）に違反する試みを示しています。ブラウザはセキュリティのため、異なるオリジンからのリクエストを制限しています。エラーメッセージにあるように、クロスオリジンリクエストは特定のプロトコルスキームでのみサポートされています。
エラーメッセージの内容を見る限り、問題はファイルのプロトコルスキームが file:// で始まっているために発生しています。これはローカルファイルからウェブ上のスクリプトにアクセスしようとした場合に発生することが一般的です。しかし、ウェブブラウザはセキュリティ上の理由から、ローカルファイルからのクロスオリジンリクエストを許可しません。

アドレスがhttpから始まらないとセキュリティ的に安全ではないからgoogle mapが表示されないと思い、調べたらLive Serverにたどり着く。

やりたいこと

・Maps JavaScript APIを使ってgoogle mapを表示させたい。

学んだこと

・API
・相対パス
・Live Server
・相対パスとLive Serverの違い

API

・Application Programming Interfaceの略。
・APIは企業や個人が作成でき、利用できる:

APIはソフトウェアやサービスの機能やデータにアクセスし、それを他のアプリケーションやサービスから利用できるようにするプログラムインターフェースです。企業や個人がAPIを作成して提供し、他の開発者やアプリケーションがそれを利用できる。

・例えば、Google MapsのAPIを利用すれば、企業や個人のサイトでGoogle Mapsと同じ機能を使えたり、Google Mapsのピンなどをカスタマイズできる:

Google Maps APIを使用すると、企業や個人のウェブサイトやアプリケーションでGoogle Mapsの機能を統合できます。これにより、カスタム地図の表示、ピンの追加、経路の計算、場所の検索などの機能を利用できる。また、Google Maps APIを使用することで、地図の外観や挙動をカスタマイズすることも可能です。
ただし、APIの利用には通常、APIキーなどの認証情報が必要であり、利用に際してはAPIプロバイダーの利用規約に従う必要があります。また、APIの制限や料金体系にも注意が必要です。 APIの詳細な情報は、APIプロバイダーのドキュメンテーションや利用規約を確認することが重要です。

相対パス

・相対パスは、ウェブページ内のリンクやリソース（画像、スタイルシート、スクリプトなど）を指定するための方法。
・相対パスは現在のファイルからリンク先までのパスを示す。
・相対パスは通常、現在のウェブページやファイルの場所に基づいてリソースにアクセスするために使用される。
例）
../images/picture.jpg のような相対パスは、現在のフォルダから親フォルダに移動して images フォルダ内の picture.jpg にアクセスする。

Live Server

・Visual Studio Code（VSCode）の拡張機能の一つ。

・Live Serverは、ウェブ開発の際に便利なツールやエクステンションの一つ。
・一般的に、Live Serverは開発者に対してローカルのウェブサイトを実行し、ライブでプレビューできる機能がある。
・Live Serverは通常、インストールされたテキストエディタや統合開発環境に統合される。
・プロジェクトのファイルや変更を監視し、ブラウザでリアルタイムにプレビューできる。
・Live Serverを使用することで、ウェブページの変更を保存するたびに手動でリロードする必要がなくなり、開発プロセスが効率的になる。

・Live Serverの参考にした記事

相対パスとLive Serverの違い

・「Live Server」は開発プロセスのツールであり、ローカルでウェブページを実し、ライブでプレビューできるようになる。
一方、相対パスはファイルやリソースの場所を指定する方法です。
・Live Serverは開発中のウェブサイトのプレビューに役立ち、変更をリアルタイムで反映できる。
・相対パスは、ウェブページ内のリンクやリソースの場所を指定するために使用され、ウェブサイトのファイル構造に依存する。
・Live Serverは開発者の作業効率向上に寄与しますが、相対パスはウェブページの正しい構築に必要。

・まとめ

一般的に、開発中には「Live Server」のようなツールを使用してプレビューし、相対パスを使用してウェブページ内のリンクやリソースの場所を指定します。

成果

・google map表示できた！