事例紹介 2025.08.16

Google Maps API取得方法を完全解説｜初心者でも簡単にWebサイトに地図を埋め込む手順

WebサイトやWebアプリケーションに地図機能を組みむために必要な、Google Maps APIですが、「APIキーの取得方法がよくわからない」「設定が複雑そう」と感じている方も多いのではないでしょうか。

本記事では、Google Maps API（Google Maps Platform）のAPIキーを取得する方法を、詳しく解説します。プロジェクトの作成からAPIの有効化、実際の使用制限設定まで、実用的な情報を網羅的にお伝えします。

なお、当記事では工房ヒラムでよく使用するWordPressテーマ「TCD」での利用を前提とした解説も含めていますが、基本的な取得方法は他のテーマや用途でも同様です。

Google Maps APIとは何か

Google Maps APIは、Googleが提供する地図サービスをWebサイトやアプリケーションに組み込むためのプログラミングインターフェースです。Maps JavaScript API、Geocoding API、Places APIなど、様々な種類のAPIが用意されています。

Google Maps APIでできること

Google Maps APIを使用することで、以下のような機能をWebサイトに実装できます。

地図の表示とカスタマイズ
マーカーやポップアップの設置
ルート検索と道順案内
住所から座標への変換（Geocoding）
座標から住所への変換（Reverse Geocoding）
周辺施設の検索
ストリートビューの表示

Google Maps Platformの料金体系

Google Maps Platformは基本的に有料サービスですが、APIごとに無料利用枠が設定されています。

最も一般的なMaps JavaScript API（地図表示）の場合：

月1万回まで無料
超過分は1,000リクエストあたり7ドル

これは1日あたり約330回の地図表示に相当し、多くの中小規模のWebサイトにとっては十分な量といえるでしょう。

無料枠を超えた場合は従量課金制となり、使用したAPI呼び出しの回数に応じて料金が発生します。

Google Cloud Platform（GCP）とは

Google Maps APIを利用するには、Google Cloud Platform（GCP）のアカウントが必要です。GCPは、Googleが提供するクラウドコンピューティングサービスの総称で、様々なGoogle製品のAPIを一元管理できるプラットフォームです。

APIキー取得に必要なもの

Google Maps APIのキーを取得する前に、以下の準備を整えておきましょう。

Googleアカウント（Gmail）
クレジットカードまたはデビットカード

クレジットカードは本人確認と請求先情報の登録のために必要ですが、無料枠内であれば実際に請求されることはありません。

Google Maps APIキーの取得手順

ステップ1：Google Cloud Platformへのアクセス

まず、WebブラウザでGoogle Cloud Platform（https://console.cloud.google.com/）にアクセスします。Googleアカウントでログインしていない場合は、ログイン画面が表示されるので、お手持ちのGoogleアカウントでログインしてください。

初回利用の場合は、利用規約への同意が求められます。内容を確認の上、同意してください。

ステップ2：プロジェクトの作成

Google Cloud Platformでは、すべてのリソースがプロジェクト単位で管理されます。まだプロジェクトを作成していない場合は、新しいプロジェクトを作成する必要があります。

画面上部のプロジェクト選択ドロップダウンをクリックし、「新しいプロジェクト」を選択します。プロジェクト名は任意の名前を設定できますが、後から変更も可能ですが、プロジェクトが増えた時のために、分かりやすい名前を付けることをお勧めします。

組織は個人利用の場合は空白のままで問題ありません。

ステップ3：請求先アカウントの設定

Google Maps APIを利用するには、請求先アカウントの設定が必要です。これは無料枠を利用する場合でも必須の手順となります。

左側のメニューから「お支払い」を選択し、「請求先アカウントをリンク」をクリックします。請求先アカウントがない場合は「請求先アカウントを作成」を選択してください。

クレジットカード情報を入力し、請求先住所を正確に記入します。この情報は本人確認のために使用され、無料枠内であれば実際に請求されることはありません。

ステップ4：APIの有効化

次に、使用したいAPIを有効化します。左側のメニューから「APIとサービス」→「ライブラリ」を選択します。

WordPressのTCDテーマで地図機能を使用する場合は、以下の2つのAPIが必要です：

Maps JavaScript API

検索ボックスに「Maps JavaScript API」と入力し、該当するAPIを選択してください。「有効にする」ボタンをクリックしてAPIを有効化します。

Geocoding API

続いて「Geocoding API」も同様に検索して有効化してください。このAPIは住所を座標に変換するために必要です。

参考情報： 他にも以下のようなAPIが利用できますが、TCDテーマの基本的な地図表示には不要です。

Places API（施設情報の取得）
Directions API（ルート検索）
Street View Static API（ストリートビュー画像の取得）

ステップ5：APIキーの作成

APIが有効化されたら、実際にAPIキーを作成します。「APIとサービス」→「認証情報」を選択し、「認証情報を作成」→「APIキー」をクリックします。

APIキーが自動生成されます。このキーをTCDテーマオプションのGoogle map 表示用のAPIキー入力欄にコピペします。

APIキーの制限設定

ここまでの作業で、地図は表示できますが、作成したAPIキーには、セキュリティのために制限を設定することが重要です。APIキーの「編集」をクリックして制限を設定しましょう。

HTTPリファラーの制限設定

「アプリケーションの制限」で「HTTPリファラー（ウェブサイト）」を選択します。

「ウェブサイトの制限」欄に、あなたのWebサイトのURLを入力してください。サイト全体で使用する場合は、URLの最後に「*」を付けます。

設定例：

https://example.com/* （example.comの全ページで使用可能）
https://www.example.com/* （wwwありの場合）

複数のドメインで使用する場合は、「アイテムを追加」をクリックして追加できます。

APIの制限設定

「APIの制限」で「キーを制限」を選択し、以下の2つのAPIのみにチェックを入れます：

Maps JavaScript API
Geocoding API

「保存」ボタンをクリックして設定を完了してください。

Google Maps APIの基本的な使用方法

HTMLへの基本的な実装

取得したAPIキーを使用して、WebサイトにGoogle Mapを表示する基本的なコードは以下の通りです：

<!DOCTYPE html>
<html>
<head>
    <title>Google Maps API Example</title>
    <style>
        #map {
            height: 400px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        function initMap() {
            const map = new google.maps.Map(document.getElementById("map"), {
                zoom: 13,
                center: { lat: 35.681236, lng: 139.767125 }, // 東京駅の座標
            });
        }
    </script>
    <script
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
        async
        defer
    ></script>
</body>
</html>

「YOUR_API_KEY」の部分を、先ほど取得したAPIキーに置き換えてください。

マーカーの追加

地図上にマーカーを表示するには、以下のコードを追加します：

function initMap() {
    const map = new google.maps.Map(document.getElementById("map"), {
        zoom: 13,
        center: { lat: 35.681236, lng: 139.767125 },
    });
    
    const marker = new google.maps.Marker({
        position: { lat: 35.681236, lng: 139.767125 },
        map: map,
        title: "東京駅"
    });
}

情報ウィンドウの実装

マーカーをクリックした際に情報を表示するには：

const infoWindow = new google.maps.InfoWindow({
    content: "東京駅です"
});

marker.addListener("click", () => {
    infoWindow.open(map, marker);
});

よくあるエラーとその解決方法

APIキーに関するエラー

「This page can’t load Google Maps correctly」というエラーが表示される場合、以下の点を確認してください：

APIキーが正しく設定されているか
使用しているAPIが有効化されているか
HTTPリファラーの制限設定が正しいか
請求先アカウントが設定されているか

使用量制限エラー

「You have exceeded your daily request quota」というエラーの場合は、1日の使用量制限に達している可能性があります。Google Cloud Platformの管理画面で使用量を確認し、必要に応じて制限値を調整してください。

ドメイン制限エラー

HTTPリファラー制限を設定している場合、指定したドメイン以外からのアクセスはブロックされます。テスト環境や本番環境のドメインが正しく設定されているか確認してください。

セキュリティ上の注意点

APIキーの適切な管理

APIキーは機密情報として扱い、以下の点に注意してください：

GitHubなどの公開リポジトリにAPIキーを含めない
環境変数やサーバーサイドの設定ファイルで管理する
定期的にAPIキーを更新する
不要になったAPIキーは削除する

制限設定の重要性

APIキーには必ず適切な制限を設定してください。制限なしのAPIキーが悪用されると、高額な請求が発生する可能性があります。

料金を抑えるためのベストプラクティス

キャッシュの活用

同じ地図を繰り返し表示する場合は、ブラウザキャッシュやCDNを活用して、API呼び出し回数を削減しましょう。

静的地図の利用

動的な操作が不要な場合は、Maps Static APIを使用することで、コストを削減できます。

使用量の監視

Google Cloud Platformの管理画面で定期的に使用量を確認し、予想以上の使用量がないかチェックしてください。

まとめ

Google Maps APIの取得方法について、プロジェクトの作成から実際の実装まで詳しく解説しました。最初は複雑に感じるかもしれませんが、一度手順を覚えてしまえば、様々なWebサイトやアプリケーションに地図機能を組み込むことができます。

重要なポイントは、APIキーの適切な管理と制限設定です。セキュリティに配慮しながら、Google Maps APIの豊富な機能を活用して、ユーザーにとって価値のあるサービスを提供しましょう。

初回設定時は請求先アカウントの登録が必要ですが、APIごとに無料枠があるため、多くの個人サイトや小規模なビジネスサイトであれば、実質無料で利用できます。ぜひこの機会にGoogle Maps APIを活用して、あなたのWebサイトに地図機能を追加してみてください。

投稿者: hiram
事例紹介
コメント: 0