連携サービス・ツール活用

Google MAP APIの取得方法

Google Map APIの取得方法 連携サービス・ツール活用

こんにちは、TEDASKのToshi Seitoです。

Googleマップをプログラムとして利用する場合には、Google Maps JavaScript APIというプログラムを利用する必要がありますが、その際に必要なのがAPIキーです。

WordPressでもよくGoogle MapのAPIキーが必要になることがあります。

今回は、Google Map APIの取得方法についてまとめましたので、参考にしてください。

Google MAPのAPIキーが必要かどうかの判断方法

冒頭でも書きましたが、Google MapのAPIキーが必要なのは、プログラムとしてGoogleマップを使ったりデザインをカスタマイズする場合です。

逆に不要な場合というのは、例えば会社の住所や所在地が決まっている場合です。

その場合は、Google Mapにアクセスして会社の住所を入力して該当の場所が特定できたら、Googleマップの共有から埋め込みをクリックすると、iframeというHTMLタグが表示されます。

そのiframeをHTMLブロックにしてホームページの該当の場所に入れさえすれば、簡単に表示ができます。

大抵の場合はこの埋め込みで対応ができるので、このGoogle Map APIを使うことというのは、一般的には多くはありません。

しかしながら、Webサービス等の場合に、住所を入力してその住所をリアルタイムでマップに反映させるという一連の動作が必要な場合は、このGoogle Map APIが必要になります。

Googleマップを、自分のサイトで自由に操作したい場合に必要なイメージです。

Google Map APIを使うためのAPIキーの取得方法

それでは早速、Google Map APIを利用するために必要なAPIキーの取得方法を見ていきます。

Google Map APIを使うためのAPIキーの取得方法

Google検索で、Google cloud consoleと検索します。

Google Map APIを使うためのAPIキーの取得方法

すでにGoogleにログインしている状態であれば、ログインしている状態であればこのような管理画面が表示されると思いますので、プロジェクトの選択をクリックします。もしログインしていない場合はログインしましょう。

Google Map APIを使うためのAPIキーの取得方法

リソースの選択新しいプロジェクトをクリックします。

Google Map APIを使うためのAPIキーの取得方法

プロジェクト名は導入するWEBサイトのドメインサイト名(半角英数字)で自分がわかるように決めるのがおすすめです。

親リソース組織なしで問題ありませんが、もしGoogle Workspaceを契約している場合はその組織にすることで請求その組織に割り当てることができます。

Google Map APIを使うためのAPIキーの取得方法

プロジェクトができたら、今度は検索窓に「Google map」と入力すると、Maps JavaScript APIという結果が表示されるはずなのでクリックします。

Google Map APIを使うためのAPIキーの取得方法

有効にするをクリックします。

Google Map APIを使うためのAPIキーの取得方法

すると、Google Map APIの利用にはクレジットカードの登録が必要のため、アカウントにクレジットカードの紐づけをします。同意して続行をクリックします。

ちなみに、右側の説明にもある通り1ヶ月あたりの一定の利用量までは無料のため、アクセス量がそれほどない場合は無料で使い続けることができますが、アクセスが多いサイトの場合はどのくらい消費しているかによって、サブスクリプションでの支払いもできるため、支払いプランの検討をするのが良さそうです。

Google Map APIを使うためのAPIキーの取得方法

私の場合、たまたまGoogle広告でクレジットカードを登録していたので、選択された状態ですが、新規の場合はクレジットカード登録画面になると思いますので、クレジットカードと請求者の情報登録を行いましょう。

完了したら、無料で利用開始をクリックします。

Google Map APIを使うためのAPIキーの取得方法

そうすると、自分のAPIキーに今回必要だったAPIキーが取得できたので、こちらをコピーして控えておきます。

Google Map APIを使うためのAPIキーの取得方法

次にこのAPIキーを特定のサイトだけで使えるように制限をかけます。

画像の例では制限するタイプの選択とリファラーを入力します。

例ではウェブサイトに設定にして、リファラーはhttps://test.com/*にしていますが、リファラーについては利用するサイトのに合わせてください。また、最後のアスタリスク「/*」はそのドメインの配下すべてという意味になるので、このまま真似するように「/*」と入力しておけば間違いないです。

これで、APIキーを制限することができました。

以上がGoogle MAP APIの取得方法です。

まとめ:APIキーは取得後の「制限」が一番重要です

いかがでしたでしょうか。

Google Map APIキーの取得自体は、画面の案内に従えばそこまで難しくありません。

最も重要なのは、最後に設定した「APIキーの利用制限(リファラー設定)」です。

これを忘れると、他人にAPIキーを勝手に使われてしまい、知らぬ間に無料枠を超えて課金されてしまうリスクがあります。

今回設定した https://ドメイン/* の設定だけは必ず忘れないようにしてください。

正しく設定できていれば、毎月かなりのアクセス数までは無料枠内で収まりますので、企業のWebサイトでも安心して利用できるはずです。

ぜひ今回の手順を参考に、Googleマップのカスタマイズに挑戦してみてください。

また、ご自身だけでは難しい場合、作業が心配な場合はオンラインでの対応も承っていますのでお気軽にご相談ください。

以上、「Google MAP APIの取得方法」でした。

この記事を書いた人
Toshi Seito

TEDASK代表
WordPressに関する相談実績のべ600件以上!WordPressの高度なカスタマイズから、海外製の高機能WordPressテーマの導入支援、LaravelによるWEBサービス制作はお任せ下さい。

Toshi Seitoをフォローする
シェアする

コメント

タイトルとURLをコピーしました