Google Maps Platformを使ってみた

はじめに
<iframe>でGoogleマップを埋め込む
Google Maps Platform
APIキー取得手続き
Google Maps Platformサンプルコード作成
課金は
さいごに

はじめに

以前、配車管理の仕事の相談がありました。地図上に車の位置を表示できないかという話でした。具体的な仕事には発展しませんでしたが興味をそそる話だったので個人的に趣味の範囲であれこれやってみたいと思います。
これを機に仕事につながれば尚良いかなと。

自分のWebサイトにGoogleマップを表示するだけなら<iframe>タグを使えば実現できます。
それ以上のことがしたいならGoogle Maps Platformとやらを使えばできるようでが、これはなかなか奥が深そうなので、まず<iframe>で地図表示をやってみます。

<iframe>でGoogleマップを埋め込む

Googleマップを開き、埋め込みたい位置を検索します。
ここでは「ハルカス」にしました。

共有をクリック

「地図を埋め込む」タグを選択

「HTMLをコピー」をクリックしてクリップボードにHTMLタグを保存します。

この投稿に埋め込みました

下記が埋め込んだGoogleマップです。

で、これからが本番です。
Google Maps Platformの利用設定をして、簡単なサンプルを作ってみたいと思います。

Google Maps Platform

Google Maps Platfromとは

「モバイルアプリやウェッブページにGoogleマップの機能やデータを組み込むためのAPIとSDKセット」だそうです。

SDK（Sortware Development Kit）はというと、ソフトウェアを開発するために必要なプログラム、ライブラリ、API、技術文書、サンプルコードなどが一式パッケージ化されたものですね。

ひと言で言うと、マップ用のAPIとライブラリですね。

Google Maps Platformの位置付け

Google Maps Platformは「Google Cloudのプロダクト」だそうです。
プロダクトは直訳すると「商品」なので、Google Cloudの商品ということですね。

Google Cloudはなにかというと、
「Googleが提供する「パブリッククラウド」サービスで、自社サーバーなどの物理的な設備を用意・管理することなくインターネット経由でGoogleの持つITインフラを必要な分だけ利用できるプラットフォーム」だそうです。
プラットフォームは「特定のサービスやソフトウェアを動かすための基盤となる環境」なので、Googleの持つ便利な機能（プロダクト（商品））を必要なだけ利用できる環境ということですね。

Google Maps Platformは、Google Cloudの環境で利用できるGoogleの持つ便利な機能のひとつということですね。
プロダクト（商品）と呼んでいるのは、利用すると課金されるからでしょうか。

Google CloudにはGoogle Maps Platform以外にも沢山のプロダクトがあります。
Google Maps Platformは「マップと地理空間」に含まれます。

分類
AIとML
ビジネスインテリジェンス
コンピューティング
コンテナ
データ分析
データベース
デベロッパーツール
分散型クラウド
ハイブリッドクラウドとマルチクラウド
業界固有
インテグレーションサービス
管理ツール
マップと地理空間
メディアサービス
移行
複合現実
ネットワーキング
オペレーション
生産性とコラボレーション
セキュリティとID
サーバーレス
ストレージ
Web3
その他Googleプロダクトとサービス

利用開始

Google Maps PlatformのAPIを利用するには、APIキーを取得する必要があります。
APIキーは、「APIを呼び出すプロジェクトを識別する一意の文字列で、主に課金・割り当て・モニタリングに用いられる」そうです。

このAPI取得の仕方ですが、Google Maps PlatformはGoogle Cloudのプロダクトなので、まず最初にGoogle Cloudの登録が必要です。
で、こういった作業は何処でするのかというとGoogole Cloud Consoleという画面で行います。

余談ですが、Webで検索しているとGoogle Cloud Platformというのが度々引っ掛かってきます。これはGoogle Cloudの旧称だそうです。Google Cloud = Goole Cloud Platfrom で、Google Cloud Platformの呼び方は古いということです。

APIキーを取得するまでのざっくりとした手順

Google Cloud Console にログイン
GmailアカウントやGoogle Workspaceアカウントでログインできます。
Googleアカウントを持っていない場合はGoogle Cloud Console画面でアカウントを作成できます。
プロジェクトを新規作成
Google Cloudのプロダクトを使用するには、まずCoogle Cloud Console上にプロジェクトを作成する必要があります。
プロジェクトはGoogle Cloud上で各種サービスを管理する単位のことです。
今回の場合なら、Mapsプロジェクトを作成して管理します。
課金アカウントを設定
Google Cloudのプロダクトを使用するには、課金アカウントの設定が必要です。
Maps JavaScript APIを有効にする
Maps JavaScript APIを使うにはGoogle Cloud ConsoleのAPIライブラリから該当のAPIを検索して有効化する必要があります。
有効化するとAPIキーが自動生成されます。
セキュリティ設定
自動生成されたキーは、初期状態では誰でも使用できてしまう非常に危険な状態なので保護する必要があります。

課金について

実はこれが一番気になる所で、でもやってみないと分からない所でもあります。
思いもかけない請求が来ないように注意していきたいと思っています。

Google Maps Platformの課金は「従量課金制」で、APIごとに設定された無料枠を超過した場合にリクエスト数に応じて課金が発生します。

APIごとに無料枠

以前は月額200ドルの無料クレジットがあったそうですが、2025年3月以降はAPIごとに無料枠が設定されていて、無料枠を超過した場合にリクエスト数に応じて課金されるようです。
無料枠は変更されることがあるようですが、Map Loadsは月50,000ロードまで、Direction APIは月100,000リクエストまで無料みたいです。

あと、新規の方には無料クレジット$300分をくれるそうです。
有効期限は90日間だそうで、ほったらかしてると無くなるようです。

課金の管理

Google Cloud Consoleに使用料金を管理するためのツールが備わっているようです。
使用料の上限設定で課金されるAPIイベント数を制限することができるようです。
あと、使用料が特定の予算やAPIの制限に近づいたときに通知を受け取る設定もあるようです。

APIキー取得手続き

先ほど書いた手順も一度書いておきます。これに従ってAPIキーを取得していきます。

Google Cloud Console にログイン
プロジェクトを新規作成
課金アカウントを設定
Maps JavaScript APIを有効にする
セキュリティ設定

１．Google Cloud Consoleにログイン

下記アドレスでGoogle Cloud Consoleにログインします。
ログインにはGmailやGoogle WorkspaceのGoogleアカウントが必要です。
Googleアカウントを持っていない場合はログイン画面にある「アカウントを作成」からアカウントを作成する必要があります。

Google Cloud Platform

Google Cloud Platform lets you build, deploy, and scale applications, websites, and services on the same infrastructure ...

ログインすると下記の画面が表示されました。
利用規約と通知メールのチェックボックスにチェックを入れて「同意して続行」をクリック

無事に起動しました。

無料トライアル

トライアルは初めてGoogle Cloudを利用するユーザー向けに、90日間利用できる300ドルの無料クレジットが付与されるプログラムだそうです。

無料トライアル終了後やクレジットを使い切った後に継続して利用するにはフルアカウントを有効にする必要があるようです。

とりあえず無料トライアルを利用します。
右上の「無料で利用開始」または左中の「無料トライアルを試す」をクリックすると設定画面に入ります。どちらのボタンでも行先は同じようです。

「同意して継続」をクリック

「名前と住所を追加」をクリック

連絡先情報を入力して「保存」をクリック
プロファイルの種類は「個人」にしました。

「お支払方法を追加」を選択すると前の画面に戻ります。
連絡先情報に名前とIDが入力されているのが確認できます。

カード情報を入力します

先ほど入力した住所とカードの請求先住所が同じ場合「請求先住所と正式な住所は同一」のチェックはそのままにします。
違う場合、チェックをはずすとカード請求先住所を入れる欄が表示されます。

「カードを保存」をクリックすると前の画面に戻ります。
お支払方法に入力したカード情報が入っているのが確認できます。

「無料で利用開始」をクリックすると下記の画面が開きました

とりあえず「閉じる」をクリックしました。

画面を見てみると「無料トライアルをご利用中です」となっています。
「￥44,411クレジット中の0クレジットが使用されました」と出ていますが、これが無料の$300なんでしょうね。
だいたい1ドル148.04円換算ですね。別の日にアカウント作成すると金額違ったりするんでしょうかね？

フルアカウント有効化について

まず用語の整理です。
フルアカウント＝従量課金制アカウント＝有料アカウント
この３つは同じ意味で、利用したリソースに対して従量課金が開始される状態です。
一方、無料トライアルは一定期間の無料利用枠を利用できる状態です。

現在、無料トライアル利用中です。
無料トライアルは、登録から90日経過または300ドル分のクレジットを使い切ると終了します。

無料トライアル終了後、有料アカウントにアップグレードしない場合、無料トライアル期間中に作成したリソースは停止・削除される可能性があるそうです。
無料トライアル終了後30日以内であれば有料アカウントにアップグレードすることでリソースが失われずに済むようです。

有料アカウントにアップグレードするのが「フルアカウントを有効化」ボタンのようです。
無料トライアル中にアップグレードすると、無料トライアルのクレジットが適用されたままリソースの利用が中断されることなく継続され、クレジットを超えた分に対してのみ請求が発生するそうです。
有料アカウントにアップグレードしても無料トライアルのクレジットは残るということですね。

無料トライアル終了後もGoogle Cloudを使うつもりならば、忘れないうちにアップグレードしておいても良いと思いますが、まぁしばらくは無料トライアルのままで行こうと思います。

これでGoogle Cloud Consoleが使えるようになったので、プロジェクトを作成していきます。

２．プロジェクト作成

Google Maps APIを使うのは、まずGoogle Cloud Console上にプロジェクトを作成する必要があります。

ここで、ちょっと用語の整理をしておきます。
Google Maps Platform：ウェブサイトやモバイルアプリにGoogleマップの機能を組み込むために提供される「サービス全体」を指します。
Google Maps API：プラットフォーム無いの特定の機能やデータにアクセスするための「インターフェース」です。

プロジェクトとはGoogle Cloud上で各種サービスを管理する単位のことです。

Google Cloud Platformで初めてGoogle Cloud コンソールにアクセスした際に自動的に「My First Project」が作成されています。

この「My First Project」はさておき、新しいプロジェクトを作成していきます。

プロジェクト選択ツールを開く

左上のタイトル「Google Cloud」の右側にある「My First Project」をクリックすると、プロジェクト選択ダイアログが開きます。

右上の「新しいプロジェクト」をクリックすると新しいプロジェクト作成画面が開きます

プロジェクトの数には制限があるようです。
これは、Google Cloudコミュニティを予期せぬ使用料の急増から保護するためだそうです。
足りない場合は追加のリクエストができますが、支払いが必要になる場合があるようです。

プロジェクト名を入力します。
今回は「My Maps Project」にしました。
後から変更できるようです。

プロジェクト名の後に自動で生成されたプロジェクトIDが表示されています。
この段階で編集は可能ですが、プロジェクト作成後は変更不可です。
特にこだわりがなければ自動生成の値で問題ないようです。

場所は個人アカウントであれば「組織なし」のままで良いようです。

「作成」ボタンをクリックしプロジェクトの作成が完了すると、ダッシュボードに戻ります。

この段階では、今作成したプロジェクトは選択されていません。My First Projectのままです。
画面左上のプロジェクト名をもう一度クリックし、プロジェクト選択ダイアログを開きます。

一覧の中に今作成した「My Maps Project」があるので、それを選択するとダッシュボードに戻ります。

作業中のプロジェクトが変わったのが確認できます。
これでGoogle Maps APIの各種設定を、このMy Maps Project に対して行う準備が整いました。

３．課金アカウントを設定

Google Cloudの課金アカウントは、Google Cloudの利用料金の支払い先と管理方法を定義するアカウントです。
１つの課金アカウントに複数のプロジェクトを関連付けることができ、関連付けられたプロジェクトの使用料金は全てその課金アカウントに請求されます。

参考にしているサイトや資料を見ると、最初のプロジェクトを作成したあとで課金アカウントを作成していたので此処でやろうと思ったのですが、課金アカウントもう出来ていました。
先ほど「無料トライアル」の設定をした際にカード情報等を入力したのですが、それが課金アカウントだったようです。
で、プロジェクトを新規作成した時にこの課金アカウントと関連付けされているようです。

なので、新規作成したMy Maps Projectの課金の設定を見ていきたいと思います。
左上で新規作成したプロジェクト「My Maps Project」が選ばれているのを確認してから、その左側の三本の線をクリックして「ナビゲーションメニュー」を表示します。

ナビゲーションメニューの「課金」を選択すると下記の画面が表示されます。
この画面で請求先アカウントや支払い情報などが確認できます。

概要にある「請求先アカウントを管理」をクリックしてみると、下記のように請求先アカウントIDと、この請求先アカウントにリンクされているプロジェクトが表示されました。

左上のパンくず「お支払い/アカウント管理」の「お支払」クリックで前の画面に戻れます。

これでMaps APIを利用するための準備は完了です。

が、概要画面でひとつ気になることがありました。
右側にある「請求ヘルスチェック」の電球アイコンが「１」となっているので、何かヘルスチェックに引っ掛かっているようです。

「→すべてのヘルスティックを表示」をクリックしてみたら下記の画面が表示されました。

予算アラートを設定しましょうというおすすめだったようです。
今の所無料トライアルなので大丈夫とは思いますが、従量課金制ってなんとはなしに怖いので今のうちに設定しておきます。

「予算の作成」をクリックすると「予算の作成」画面が表示されます。

名前は必須ですので「ひと月の予算」と付けました。
あとはディフォルトのままにしました。
「次へ」をクリック。

此処では金額を設定します。
予算タイプはディフォルトの「指定額」のまま。
金額は1000円にしました。
「次へ」をクリック。

指定額を超えるとメールが送られて来るようです。
ここではそのしきい値を設定しています。
ディフォルトで上記の値が入っていました。
これで問題ないと思ったのでこのまま「終了」をクリックしました。
クリックすると「お支払/概要」画面に戻り、請求のヘルスチェックの所が下記のようになっていました。

無事設定されたようで、スッキリしました。

４．Maps JavaScript APIを有効にする

Google MapsをWebサイトやモバイルアプリで表示するには「Maps JavaScript API」を有効にする必要があります。
APIライブラリから該当のAPIを探し出して有効化していきます。

「My Maps Project」が選択されているのを確認して、三本線をクリックしナビゲーションメニューを開きます。

メニューから[APIとサービス]-[ライブラリ]を選択すると下記の画面が開きます。

「APIとサービスを検索」欄に「Maps Javascript API」と入力して検索します。

検索結果から「Maps JavaScript API」を選択します。

「有効にする」をクリックするとAPIキーが表示されます。

このAPIは地図を表示する際に使用します。左メニューの[APIとサービス]-[認証情報]から確認することができます。
「Google Maps Platform に移動」しかないのでこれをクリックすると、「APIを保護する」というダイアログがひらきました。

APIキーの保護は左メニューからも設定できますので、「後で」を選択してダイアログを閉じました。

セキュリティ設定

発行されたAPIキーは地図を表示するJavaScriptにパラメータとして追加する形で利用します。
これだと外部から見える状態になります。
APIキーの安全性を高めるために使用元や使用できるAPIの種類を制限する設定をしていきます。

認証情報画面を開く

Google Cloud画面が開いている場合は、左上三本線でメニューを開き[APIとサービス]-[認証情報]を選択すると人情情報画面が開きます。

Google Maps Platform画面が開いてる場合は左メニューから「認証情報」を選択します。

表示された画面のAPIキーの中の「Maps Platform API Key」を選択すると「APIキーを編集」画面が開きます。
この画面で制限を設定していきます。

アプリケーション（ウェブサイト）の制限

APIを使用できるウェブサイトを設定します。
許可を与えるサイトのアドレスを登録していきます。ここに追加したサイトからのみAPIを使用できます。

「アプリケーションの制限」から「◎ウェブサイト」を選択するとその下に「ウェブサイトの制限」欄が表示されますので、その下の「＋Add」をクリックします

「ウェブサイトを追加」欄が開きますので許可したいドメイン名を入力し「完了」をクリックします。
此処では、このブログのサイトを設定しました。

他にも許可したいサイトがある場合は再度「＋Add」をクリックして追加します。
ここではテスト用のローカルサーバーを追加しました。
末尾に「/*」を付けると、指定ドメイン内すべてのパスで利用可能になります。

許可したサイトは一覧に表示されます。

API制限

このAPIキーを使ってアクセスできるAPIの種類を設定します。
この設定で選択したAPIのみ利用できます。

この画面を開いた段階で既に31個のAPIが選択されていました。
選択されていたAPIはすべてMap関連のAPIでしたので、Maps JavaScript APIを有効にした時に選択されたのだと思われます。

今回は「Maps JavaScript API」しか使わないので、すべてのチェックをはずして「Maps JavaScript API」のみチェックをいれます。
リストボックスを開き「Maps JavaScript API」以外のチェックを全てはずし「OK」をクリックします。

選択中のAPIが1個になったのが確認できます。

これでセキュリティの設定は完了です。
「保存」をクリックすると認証情報画面に戻ります。
APIキー一覧の制限に今回の設定が表示されます。

Google Maps Platformサンプルコード作成

APIが取得できたのでサンプルコードを作成したいと思います。
Webでわかりやすいサンプルを探しましたが、ここはやっぱり本家のGoogleサイトに載っているサンプルを参考に作成していきたいと思います。

実行環境はNode.jsで立ち上げたローカルのサーバーにします。
Node.jsのインストールとサーバー構築は以前まとめたものがあります。参考までに。
Node.jsでWebサーバーを構築

以下の手順でコードを作成していきます。

HTMLページ index.html 作成
- ！DOCTYPE htmlを宣言してアプリケーションをHTML5として宣言
- 地図を保持する「map」というdiv要素を作成
- ブートストラップローダーを使用してMaps JavaScript APIを読み込み
CSSファイル style.css の作成
- 後方互換モードの対応
- divのサイズと色を設定
JavaScriptファイル index.js の作成
- マーカーが配置された地図を追加する処理を記述
実行
- テスト用のlocalhost:3000で実行します

１．HTMLページ作成

index.html

<!-- アプリケーションをHTMLとして宣言 -->
<!DOCTYPE html>

<html>

    <!-- ヘッダー タイトルとCSSとJavaScriptの指定-->
    <head>
        <meta charset="UTF-8">
        <title>Add Map</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
    </head>

    <!-- 文書本体 -->
    <body>
        <h3>My Google Maps Demo</h3>

        <!-- 地図用の領域を定義 -->
        <div id="map"></div>

        <!-- Maps JavaScript APIの読み込み -->
        <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
            ({key: "YOUR_API＿KEY", v: "weekly"});</script>
    </body>
</html>

<!-- アプリケーションをHTMLとして宣言 -->
<!DOCTYPE html>

<html>

    <!-- ヘッダー タイトルとCSSとJavaScriptの指定-->
    <head>
        <meta charset="UTF-8">
        <title>Add Map</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
    </head>

    <!-- 文書本体 -->
    <body>
        <h3>My Google Maps Demo</h3>

        <!-- 地図用の領域を定義 -->
        <div id="map"></div>

        <!-- Maps JavaScript APIの読み込み -->
        <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
            ({key: "YOUR_API＿KEY", v: "weekly"});</script>
    </body>
</html>

2行目：!DOCTYPE
- アプリケーションをHTML5として宣言するために、DOCTYPEを宣言することが推奨されています。
11行目：style.css
- CSSファイルを取り込んでいます。
１２行目：index.js
- Mpas JavaScript APIを読み込みマーカーが配置された地図を追加する処理を行うJavaScriptファイルを実行します。
２０行目：<div>
- 地図を保持するdiv要素で、「map」というidを付けています。
- index.jsの中で、このdivに地図を作成するJavaScript関数を定義しています。
- この要素のサイズはstyle.cssで定義しています
２３、２４行目：<script>
- ブートストラップローダーを使用して Maps JavaScript APIを読み込んでいます。
- ２４行目のKey: “YOUR_API_KEY” には取得したAPIキーをセットします

APIキー

APIキーはGoogle Cloud Consoleの[APIとサービス]-[認証情報]で表示される画面の「鍵を表示します」で表示されます。

Maps JavaScript APIの読み込み

コードの２３，２４行目でMaps JavaScript APIを読み込んでいるのですが、この部分はGoogle Maps Platformのガイドページからのコピペです。
コピペしたコードの「”YOUR_API_KEY”」を取得したAPIキーに置き換えています。

APIの読み込む方法は「ダイレクトスクリプト」と「インラインブートストラップローダ」があるそうで、「インラインブートストラップ」の方が推奨されているようです。
下記が「ダイレクトスクリプト」の記述です。

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=maps&callback=initMap">
</script>

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=maps&callback=initMap">
</script>

ダイレクトスクリプトはコードがシンプルで地図の読み込みをすぐに実装できますが、クライアントサイドに直接APIキーが埋め込まれるため、セキュリティリスクが高いそうです。

今回は推奨されているインラインブートストラップローダを利用してAPIを読み込みます。
メリットはAPIキーがクライアントサイドのコードに露出しないためセキュリティが高まります。

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

２．CSSファイル style.css の作成

style.css

/* 
 * マップを含む div 要素のサイズを定義するには、常にマップの高さを明示的に設定
 */
#map {
    height: 100%;
}

/* 
 * Optional: サンプルページがウィンドウいっぱいに表示されます 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* 
 * マップを含む div 要素のサイズを定義するには、常にマップの高さを明示的に設定
 */
#map {
    height: 100%;
}

/* 
 * Optional: サンプルページがウィンドウいっぱいに表示されます 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

Googleのチュートリアルのせつめいでは、
後方互換モードで動作する一部の CSSで特にパーセントベースのサイズは親ブロック要素から継承する必要があり、いずれかの祖先でサイズの指定に失敗すると0×0 ピクセルのサイズとみなされるという理由からこの宣言を含めているそうです。

３．JavaScriptファイル index.js の作成

index.js

// 地図を初期化して追加
let map;

async function initMap() {
    // ハルカスの緯度・経度
    const position = { lat: 36.64626, lng: 135.51349 };

    // 必要なライブラリをリクエスト
    const { Map } = await google.maps.importLibrary("maps");
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

    // ハルカスを中心とした地図を作成
    map = new Map(document.getElementById("map"), {
        zoom: 18,               // ズームレベル（必須）
        center: position,       // 地図の中心位置（必須）
        mapId: "DEMO_MAP_ID",
    });

    // 地図上にマーカーを配置
    const marker = new AdvancedMarkerElement({
        map: map,
        position: position,
        title: "ハルカス",
    });
}

initMap();

// 地図を初期化して追加
let map;

async function initMap() {
    // ハルカスの緯度・経度
    const position = { lat: 36.64626, lng: 135.51349 };

    // 必要なライブラリをリクエスト
    const { Map } = await google.maps.importLibrary("maps");
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

    // ハルカスを中心とした地図を作成
    map = new Map(document.getElementById("map"), {
        zoom: 18,               // ズームレベル（必須）
        center: position,       // 地図の中心位置（必須）
        mapId: "DEMO_MAP_ID",
    });

    // 地図上にマーカーを配置
    const marker = new AdvancedMarkerElement({
        map: map,
        position: position,
        title: "ハルカス",
    });
}

initMap();

<div id=”map”></div>に地図を作成するJavaScript関数を定義しています。

４行目：async function initMap()
- asyncなので非同期処理を行う関数を定義しています。
- ９行目のawaitとセットです。
６行目：const position
- 緯度と経度の定数オブジェクトを定義
９行目：const {Map}
- mapライブラリを読み込み{Map}にセットしています。
- awaitは非同期処理で、完了するまで一時停止しています。
  （awaitはasyncが付いた関数のみで使用可能）
１０行目：const{ AdvancedMarkerElement }
- マーカーのライブラリを読み込み{ AdvancedMarkerElement }にセット
- awaitは非同期処理で、完了するまで一時停止しています。
  （awaitはasyncが付いた関数のみで使用可能）
１３行目：map = new Map()
- 第１引数で<div id=”map”>要素をわたしています。
- 第２引数でオプションのオブジェクトを渡しています。
  - zoom：ズームレベルを指定しています。このオプションは必須です。
    1が世界、５が陸塊又は大陸、１０が都市、１５が通り、２０が建物と大きくなるほどズームしていきます。
  - center：地図の中心位置を指定します。このオプションも必須です。
    ここではconst positionで定義した緯度・経度を設定しています。
  - mapId：Google Cloudに保存された地図のスタイル設定や構成設定を表す一意の識別子で、本番時は自前で用意するのが一般的ですが、コードサンプルで使用できるマップID（DEMO_MAP_ID）があるので、これを使用しています。
    マップIDはGoogle Maps Platform画面の[マップ管理]画面上部の「マップIDを作成」から作成できますが、今回はやりません。
２０行目：const marker = new AdvacedMarkerElemet()
- 地図上にマーカーを配置しています。
- 引数オブジェクト
  - map：new Map()で作成した地図オブジェクト
  - position：xonst positionで定義した緯度・経度オブジェクト
  - title：任意のタイトル
２７行目：initMap();
- imitMap()関数が呼ばれるとMapライブラリと地図が表示されます。

実行

VusualStudioCodeのターミナルで localhost:3000 を起動

ブラウザで「http://localhost:3000」を呼び出すと・・・

あれっ、真っ青！？
縮小していくと、ずれてました。

経度が間違っていました。正解は下記です。
const position = { lat: 34.64624, lng: 135.51349 };
修正して読み直すと、無事表示されました。

課金は

失敗も込みで２回しか呼んでませんが、
課金がどうなるか気になるので Google Cloud Console のメニューで[課金]を選択し、お支払/概要ページを開てみましたが、未だ反映されていないみたいです。

「費用が表示されるまでに数時間かかります。２４時間以上かかることもあります。」と書いてあるので、後日確認しようと思います。

さいごに

なんとか地図表示まで出来ましたので、これから色々試していきたいです。

やってみたいのが、
ちょっと古いのですが「日経ソフトウエア 2022年 11月号」の「バスのリアルタイム運行情報をGoogleマップに表示しよう」という特集が載っています。
公共交通オープンデータセンターで公開されているデータを使ってバスの位置をリアルタイムに表示するというものです。
記事では都営バスのデータを使っていますが、関西の路線のデータが取得できるならそれを使ってやってみたいと思っています。

2025年12月
月	火	水	木	金	土	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31