きむおばプロフィール画像

きむおばです。関東在住の40代の主婦です。 ファイナンシャルプランナーとしてライターをやったり、サイトを作ったり…基本ひきこもりでお仕事をしています。
お金のこと・趣味のこと…何でも気ままに書く雑記ブログです。
目標は、ライター・サイト制作・広告他の収入バランスを整えること。ブログ収入UPに今年は力を入れます。

Menu

GoogleMapをサイトに表示するためにGoogle Map APIキーを取得する方法

google map apiキーの取得方法

Google Mapを使って地図をサイトやブログ内に表示したい場合には、APIキーを取得しなければ表示されません。きっと初めての人にはまどってしまいがちな作業なので、1ステップずつ画像で紹介していきます。初心者向けの内容になっています。

Google Mapをサイト内に表示するにはGoogle Map APIキーが必要

自分のサイトやブログにGoogleMapを表示するには、「Google Map APIキー」が必要です。WordPressで作られたサイトでプラグインを使ったとしてもAPIキーは必要不可欠です。

WordPressのプラグインを使うとGoogleマップの表示が少し楽になりますが、実はプラグインを使わなくたってGoogleMapは意外と楽に自由に地図を埋め込むことができちゃったりします。その第一歩であるAPIキーを取得する方法をなるべく詳しく解説していきますね。

Google Map APIキーを取得する手順

  1. Google Maps APIサイトへ行く
  2. 「使ってみる」ボタンをクリック
  3. Google Maps Javascript APIをクリック
  4. 「キーの取得」ボタンをクリック
  5. 「Select or create project」ボタンをクリック
  6. 「+Create a new project」をクリック
  7. プロジェクト名を入力する
  8. APIキーが発行される
  9. APIキー使用制限を設定する

Google Maps APIサイトへ行く

まずは、Google Maps APIサイトへ行きましょう。下のリンクをクリックしてください。

>>Google Maps APIサイトへ

「使ってみる」ボタンをクリック

GoogleMapを表示する方法
Google Maps APIサイトが表示されたら、上の「使ってみる」ボタンをクリック。とりあえず、使ってみましょう。詳しくは後でGoogleも丁寧に教えてくれます。

Google Maps Javascript APIをクリック

Maps JavaScript APIを選ぶ
サイトにGoogleMapを表示するためには、一覧から「Google Maps Javascript API」を選んでクリックします。

「キーの取得」ボタンをクリック

(Google Maps API)キーを取得を選ぶ
APIキーの取得が目的なので、「キーの取得」ボタンをクリックしてAPIキーを発行してもらいます。

「Select or create project」ボタンをクリック

Select or  create project
「select or create project」と書かれている下三角ボタンをクリックするとすでに他にもAPIキーを取得しているならプロジェクトが一覧表示されます。

「+Create a new project」をクリック

Create a new project
GoogleMapを表示するためのプロジェクト名を入力していくのですが、今回は、新しくプロジェクトを作成するので、「+Create a new project」を選びましょう。

プロジェクト名を入力する

プロジェクト名を入力
今回は、新しくプロジェクトを作成するので、「+Create a new project」を選びましょう。
好きなプロジェクト名を入力します。今回は「ForSampleMap」というプロジェクト名にしてみました。プロジェクト名が入力できたら、次に進むために「NEXT」ボタンをクリックしてください。

APIキーが発行される

APIキーが表示される
これだけで、もうGoogleマップを表示するためのAPIキーが発行されました。この発行されたキーを使うと、地図がサイト内に表示されるようになります。

APIキー使用制限を設定する


APIキーが無事に発行できましたが、このまま制限なしの状態では世界中のみんながこのAPIキーを自由に使ってしまいます。APIキーの利用は月25,000アクセスまでは無料で使えるのですが、APIキーを使われてしまったらすぐに無料の上限の25,000アクセスに到達してしまいます。

そこで、使用するドメインで制限をかけておきましょう。
APIキーが表示されているポップアップ画面はまだ表示されている状態でしょうか。そこに表示されている「API Console」というリンク文字をクリックするとAPIの管理ページが表示されます。閉じてしまった方は、下のリンクから管理画面へ行ってください。

>>API Console画面へ行く

認証情報をクリックする
制限を設定できる画面が表示されていない場合は、右のメニューから鍵マークの「認証情報」をクリックしてみましょう。

APIキーをクリックする
さっき発行されたばかりのAPIキーをクリックします。


少し下にスクロールすると、「キーの制限」を設定する項目があります。
現在は「なし」となっているのを「HTTPリファラー(ウェブサイト)」へチェックを変更しましょう。


「HTTPリファラー(ウェブサイト)」へチェックを入れたら、使いたいドメインのURLを下の入力フィールドに入力していきます。

きむおばブログ内でだけ有効にしたいので、「https://kimoba.com/*」と設定しました。

自分のサイトのドメイン内だけで使いたい場合は、「自分のサイトのURL/*」としましょう。「/*」はワイルドカードと呼ばれるもので、その下全部OKみたいな意味です。このように設定しておくと、きむおばブログ内のどのフォルダーでもGoogleマップは表示されるようになります。でも、他の人が私のこのAPIキーを使っても何も表示されずにエラーになるはずです。今回、APIキーをあえて隠してないので試してみたい方はテストしてみてもいいですよ。

これで、サイト内に地図を表示するためのAPIキーが発行できました。次は、WordPressのプラグインなしで自由に地図を表示していく方法をいくつか紹介して行きたいと思います。

地図マークを自分専用のアイコンに変更したり、最寄り駅からのルートを表示したり、色を変えたり…いろいろいじれて楽しいですよ。次からはお仕事でも使えるGoogleMap中級編です。お楽しみに。

google map apiキーの取得方法
Twitterで最新情報をお知らせ
みんなにシェアしてみる?
稼ぐ 

この記事と一緒によく読まれています!