2025.05.29 2025.08.26

【2025年版】GoogleマップをAPIで表示する方法｜APIキーの取得から導入まで解説

みなと

「自分のWebサイトにGoogleマップを表示したい」
こんなニーズは、企業サイトでも店舗サイトでもよくあります。

もっとも手軽なのは、Googleマップの「共有」メニューから取得できる <iframe> タグをそのまま貼る方法ですが、

複数のマーカーを表示したい
配色をブランドに合わせてカスタマイズしたい
スマホ表示に最適化したい
現在地と連動させたい

といったニーズに応えるには、JavaScript APIを使った方法が必要になります。

本記事では、2025年時点の最新手順で、

Google Maps API の使い始めに必要な設定
APIキーの取得とセキュリティ設定
実際に地図を表示する HTML + JavaScript のコード

までを、実務でもそのまま使える内容になるよう、設定やポイントを具体的に紹介していきます。

スワン

初めてでも迷わず設定できるように、スクリーンショットを交えて丁寧に進めていきますので、安心して読み進めてみてください！

基本的な表示方法を押さえたら、次のステップとして「マーカーや経路の表示」「地図の配色変更」といったカスタマイズに進むと便利です。こちらの記事で実践的な方法を解説していますので、あわせてご覧ください。

Google Maps API を使う前に知っておきたいこと

GoogleマップをWebサイトに埋め込む方法として、もっとも手軽なのは <iframe> タグを使った方法です。Googleマップ本体の「共有」→「地図を埋め込む」から取得できるコードをそのまま貼り付ければ、地図を簡単に表示できます。

ですが、マーカーのカスタマイズや配色の変更、現在地の取得、地図の動的制御など、より柔軟な表示を実現したいときには <iframe> だけでは限界があります。

そこで登場するのが、Google Maps JavaScript API です。

このAPIを使えば、以下のようなことが可能になります。

中心座標やズームレベルの指定
任意の場所へのマーカー設置
地図スタイルのカスタマイズ
現在地の取得やルート表示
イベントの追加など、インタラクティブな地図表現

つまり、「ただ見せる」から「思い通りにカスタマイズできる」地図へと、表現の幅が広がります。

利用には Google Cloud の登録が必要です

このAPIを使うには、Google Cloud Platform（GCP）でのプロジェクト作成と課金アカウントの設定が必要です。

ただし、Google は初回利用者に 300ドル分の無料クレジットを提供しており、個人利用や学習用途であれば無料枠内で十分に試すことが可能です。

トライアル終了後も、一定の無料利用枠があります

トライアルが終了すると、従来は毎月200ドル分の無料クレジットが自動的に提供されていましたが、2025年3月1日からはこの制度が廃止され、SKU（API機能）ごとに無料リクエスト数が個別に設定される仕組みに変更されました。

たとえば現在の制度では、APIの種類に応じて月あたりおよそ 1,000 回〜10,000 回までの無料リクエスト枠が用意されています。

みなと

個人サイトや小規模な企業サイトであれば、この無料枠の範囲内で十分に運用できるケースが多いです。

より詳細なリクエスト上限は、公式の料金ページで確認しておくと安心です。

APIキーを取得するまでの手順（2025年最新版）

Maps JavaScript APIを利用するには、Google Cloud Console 上で「APIキー」を取得し、設定を行う必要があります。

手順は少し多く見えますが、実際にやってみるとそこまで難しくありません。以下の流れで1つずつ進めていけば、初心者の方でも安心です！

1. Google Cloud Console にログイン

まずは https://console.cloud.google.com/ から Google Cloud Console にアクセスし、Googleアカウントでログインします。

スワン

普段お使いの Gmail アカウントや Google Workspace アカウントでログインできます。Googleアカウントを持っていない場合は、同画面からアカウントを作成してください。

ログインが完了すると、Google Cloud Console のダッシュボードが開き、そこからプロジェクトの作成やAPIの設定を行っていくことができます。

2. プロジェクトを新しく作成

Google Maps API を使うには、まず Google Cloud Console 上にプロジェクトを作成する必要があります。プロジェクトとは、Google Cloud 上で各種サービスを管理する単位のことで、「どのマップにどの設定を適用するか」を管理するための入れ物のようなものです。

①プロジェクト名をクリックする

ログインが完了すると、Google Cloud Console のダッシュボードが表示されます。画面左上には、現在選択されているプロジェクト名（例：My First Project）が表示されています。

このあと、新しいプロジェクトを作成するために、このプロジェクト名をクリックして操作を進めていきます。

スワン

「My First Project」というのは、Google Cloud が自動的に用意した初期プロジェクトです。今回はこれとは別に、自分用の新しいプロジェクトを作成していきます。

②「新しいプロジェクト」をクリックする

この画面の右上にある「新しいプロジェクト」ボタンをクリックすると、新しいプロジェクトの作成に進むことができます。

③プロジェクトの作成情報を入力する

「新しいプロジェクト」ボタンをクリックすると、プロジェクトの作成画面が表示されます。ここでは以下の項目を入力または確認します。

プロジェクト名：自由に設定できます。あとから変更できるので、迷ったらとりあえずサイト名を入れておけばOKです。
プロジェクト ID：自動で生成されます。あとから変更はできませんが、特にこだわりがなければそのままで問題ありません。
場所（組織）：個人アカウントであれば「組織なし」のままでOKです。

内容を確認して問題なければ、画面下部の「作成」ボタンをクリックしてプロジェクトを作成します。

プロジェクトの作成が完了すると、ダッシュボードに戻ります。画面左上のプロジェクト名をもう一度クリックして、作成したプロジェクトを選んでください。これで、Google Maps API の各種設定をこのプロジェクトに対して行う準備が整いました。

3. 課金アカウントを設定

Google Maps API を利用するには、課金アカウントの設定が必要です。初回利用時は無料トライアルが付いてくるので安心して進められます。ここでは無料トライアルの開始方法と、請求先アカウントの紐づけ手順を解説します。

①課金メニューにアクセスする

プロジェクトを作成しただけでは、まだ課金アカウントは設定されていません。Google Maps API を有効にするためには、まず「課金」メニューから請求先アカウントの確認・設定を行う必要があります。

画面左上にあるハンバーガーメニュー（三本線）をクリックします。メニューが展開されたら、一覧の中から「課金」を選択します。

②課金アカウントが未設定の状態を確認する

「課金」メニューにアクセスすると、作成したプロジェクトに請求先アカウントがまだ紐づいていない場合、以下のような画面が表示されます。この状態から、請求先アカウントを設定するには、「請求先アカウントをリンク」ボタンをクリックします。

ボタンを押すと、以下のようなダイアログが表示され、新規作成または管理者への確認を求められるので、「請求先アカウントの作成」リンクをクリックして進みましょう。

スワン

すでに別のプロジェクトで課金アカウントを使っている場合は、既存のアカウントを選んでリンクすることもできます。今回は新規で進める前提で解説しています！

③請求先アカウントを作成する

「請求先アカウントの作成」へ進むと、Google Cloud の無料トライアル登録がスタートします。この登録は本人確認と課金設定の準備のために必要ですが、登録しただけでは課金は発生しません。

まず、国（日本）を選択し、利用規約を確認して「同意して続行」をクリックします。

続いて、請求先情報（名前、住所など）と支払い方法を入力します。入力が完了したら、画面左下の「無料で利用開始」ボタンをクリックして、登録を完了させましょう。

⑤登録完了を確認する

無料トライアルの登録と本人確認が完了したら、最後にその課金アカウントが、作成したプロジェクトに正しくリンクされているかを確認しておきましょう。

Google Cloud Console の画面左上で対象プロジェクトが選択されていることを確認したうえで、「課金」メニューに戻ります。「概要」タブを開くと、ダッシュボードのような画面が表示され、アカウントの状態や登録済みカード情報などを確認できるようになります。

ここまでで、Maps API を利用するための準備はすべて完了しました。次のステップでは、いよいよ Maps JavaScript API を有効にして、実際に地図を表示する準備に進みます。

4. Maps JavaScript API を有効にする

Google Maps をウェブサイト上で表示するには、「Maps JavaScript API」を有効にする必要があります。このステップでは、Google Cloud Console の API ライブラリから該当の API を探し出し、有効化する手順を説明します。

みなと

この API を使うことで、地図の表示だけでなく、ピンの追加やルート表示、地図のデザインカスタマイズなど、<iframe> 埋め込みではできないこともたくさん実現できます！

①API ライブラリにアクセスする

Maps JavaScript API を使うには、まず Google Cloud Console の「API ライブラリ」から該当の API を検索して有効化する必要があります。

ダッシュボードの左上にあるメニューアイコン（三本線）をクリックし、「API とサービス」＞「ライブラリ」を選択します。

②Maps JavaScript API を検索・選択する

「API ライブラリ」の画面に移動したら、上部の検索ボックスに「Maps JavaScript API」と入力して検索します。

検索結果に「Maps JavaScript API」が表示されたら、それをクリックして詳細ページに進みます。

③API を有効にする

「Maps JavaScript API」の詳細ページが開いたら、画面上部にある「有効にする」ボタンをクリックします。

API を有効にすると、画面上にモーダル（ポップアップ）が表示され、API キーが自動生成されます。この API キーは、ウェブページ上で地図を表示する際に必要な「鍵」のようなもので、コード内に埋め込んで使用します。

このとき表示される API キーは、地図を表示する際に必要になるのでメモしておきましょう。左メニューの「API とサービス」＞「認証情報」からでも API キーを確認できます。

このままモーダル上で API キーの保護設定を行うこともできますが、ここでは左メニューから設定画面にアクセスする方法で解説します。モーダルは一度閉じて、引き続き操作を進めてください。

セキュリティ設定：APIキーを保護する方法

Maps JavaScript API を有効にすると、自動的に API キーが発行されます。しかし、このキーは初期状態では誰でも使用できてしまう非常に危険な状態です。万が一、他人に勝手に使われてしまうと、あなたのアカウントに対して課金が発生するリスクもあります。

このセクションでは、API キーの安全性を高めるために、使用元（ウェブサイト）や使用できる API の種類を制限する方法を詳しく解説していきます。

1. 編集画面を開く

API キーの制限設定を行うには、Google Cloud Console の左メニューから「API とサービス」＞「認証情報」にアクセスします。

認証情報の一覧が表示されたら、保護設定を行いたい API キー（例：Maps Platform API Key）の名前リンクをクリックしてください。編集画面に進みます。

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

まずは、API キーを使用できるウェブサイトを限定する設定を行います。これにより、指定したドメイン以外からのリクエストをブロックでき、第三者による不正利用を防げます。

「アプリケーションの制限」セクションで、「ウェブサイト」を選択します。
下に「ウェブサイト」入力欄が表示されるので、許可したいドメインを記述します。

記述例

https://example.com/*
https://stg.example.com/*
http://localhost:3000/*

/* を末尾に付けることで、指定ドメイン内のすべてのパスで利用可能になります。
本番環境以外にも、必要に応じてステージング（テスト）環境や開発環境（ローカル）のドメインも一緒に登録しておくと良いでしょう。

3. API制限

次に、この API キーを使ってアクセスできる API の種類を制限する設定を行います。これにより、意図しない API への利用や悪用のリスクをさらに抑えることができます。

「API の制限」セクションで、「キーを制限」を選択します。
表示されるリストの中から、「Maps JavaScript API」を選択します。

設定が完了したら、画面下部の「保存」ボタンを忘れずにクリックして変更を確定しましょう。

これで API キーのセキュリティ設定はすべて完了です。次はいよいよ、実際に HTML と JavaScript を使って地図を表示するステップに進みます！

HTML + JavaScriptで地図を表示してみよう

Google Maps JavaScript API を有効にし、APIキーの取得とセキュリティ設定が完了したら、いよいよ実際のWebページに地図を表示してみましょう。

今回は、「とりあえず表示させてみる」ことをゴールに、必要最小限のHTMLとJavaScriptコードをご紹介します。

スワン

マーカーのカスタマイズや配色変更、レスポンシブ対応、現在地の取得などの応用的な内容は、今後の記事で詳しく解説する予定です！

以下のコードを .html ファイルとして保存し、ブラウザで開いてみてください（※「あなたのAPIキー」の部分は、実際に取得したキーに差し替えてください）。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Google Map テスト</title>
  <style>
    #map {
      width: 100%;
      height: 400px; /* 好きな高さに調整 */
    }
  </style>
</head>
<body>
  <div id="map"></div>

  <script>
    function initMap() {
      // 地図を表示する中心の緯度・経度（ここでは東京駅）
      const myLatLng = { lat: 35.681236, lng: 139.767125 };

      // 地図を描画する処理
      const map = new google.maps.Map(document.getElementById("map"), {
        center: myLatLng, // 地図の中心を指定
        zoom: 15, // ズームレベル（数値が大きいほど拡大）
      });

      // 指定した場所にマーカーを追加
      new google.maps.Marker({
        position: myLatLng, // マーカーを置く位置
        map, // 表示する地図オブジェクト
        title: "東京駅", // マーカーにマウスを合わせたときのテキスト
      });
    }
  </script>

  <script async src="https://maps.googleapis.com/maps/api/js?key=あなたのAPIキー&loading=async&callback=initMap"></script>
</body>
</html>

上のコードを使えば、地図は下のように表示されます！
※ このページでは表示用に一部変更しています。

<div id="map"> は地図を表示するエリアです。CSSで高さを自由に指定可能です。
initMap() 関数で、地図を表示する処理を定義しています。今回は東京駅の位置にピン（マーカー）を立てています。
最後の <script> タグで、Google Maps API を読み込んでいます。URL内の "あなたのAPIキー" の部分は、実際に取得したAPIキーに置き換えてください。