Google Map APIを使ってカスタムマップを作成しよう

Google Map APIを使ってみる

今日はGoogle Map(グーグルマップ)のAPIを使ってカスタムマップを作成してみましょう!ワードプレスをお使いの方は簡単にプラグインを使って、カスタムマップを作成することができますね。同じことをマニュアルで行います。 これで不動産の物件を地図に表示したり、お店の位置情報を紹介することなどに使えたりすると思います。 完成したコードはGitHubから見てください。 注意 クレジットカードの登録なしでもAPIコールはかけられますが、Googleからのエラーのポップアップが表示されます。もし、一般ユーザー向けにAPIを使用したい場合は、アカウントの登録を完了してください。クレジットカードの登録が必要になります。 2023年の2月時点での参考料金表になります。 今日の環境 サンプルプロジェクトの確認 実際にコードを書く前にどのようなことができるのかデモで確認したい人はこの手順を追ってください。 GoogleマップのGitHubリポをクローンしてGoogleのデモGoogleマップを見てみます。GitとGitHubの使い方はこちらでも説明しています。 これでGoogleマップのデモが開くのでカスタムマーカーを使ったマップもこのように確認することができますね。 Playgroundというボタンをクリックするとコードを見ながら実際にどのように表示されるか試すことができます。 では、早速Google CloudからMAP APIのサービスを使っていきましょう! JavaScriptのプロジェクト作成 では今日はViteを使ってプロジェクトを作成します。Viteはビルドツールで、ReactやVueのアプリケーションを使う際に使う事がほとんどですが、Vanilla JS(普通のJavaScript)でも使う事ができます。 ではコマンドプロンプト(もしくはターミナル)を開いて下記の様に入力していきます。 では、npm i (installのi)のコマンドでプロジェクトができたらテキストエディタを開きましょう。 また、デフォルトのページをテストサーバーで見たい際はnpm run devのコマンドで確認することができます。 viteで作成されたmain.jsがデフォルトのJavaScriptのエントリーポイントになります。 Google Map APIを作る では、コードに入る前にgoogle Cloudを使ってGoogle MapのAPIキーを作成します。まずは、googleクラウドのページにアクセスします。 右上の無料で利用開始をクリックします。 では、フォームを入力していきます。 では、次のページも完了させ登録を完了させてください。 次にコンソールのページが見れるのでそこから、プロジェクトの選択をクリックします。 次に、新しいプロジェクトをクリックします。 次に、プロジェクト名を適当に入れて、作成ボタンを押します。 プロジェクトが作成できたら、メイン画面の右上にプロジェクトを選択するリンクが表示されるのでそれをクリックします。 次にGoogle Cloudの左上のタブから①APIとサービス、②Google Map Platformの二つを探してピンしておきましょう。ピンはホバーしたときに表示される画びょうのアイコンでショートカットのように上部に持ってこられるので今後探す手間が省けます。 カスタムマップの作成 では、Google Cloudからカスタムマップを作成します。 Google Maps Platformからマップ管理を選択します。 次にCREATE MAP IDを選択します。 次に、マップの情報を入力します。 名前は、自分のプロジェクトを適当に入力します。説明も同じように適当に入れます。Map Typeはデスクトップで表示させたい場合は、JavaScriptを選択します。 下にあるRasterとVectorの選択はたデフォルトのRasterを選択します。Vectorでも良いですが、ブラウザによって対応していないものもあるので注意。 … Read more