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

2018/5/13(日) 2018/5/13(日) きむおば

このブログではアフィリエイト・アドセンス広告を利用しています

当ブログでは、アドセンス・アフィリエイト広告を掲載しています。
消費者庁が発表しているルールに沿って記事を作成していますが、問題のある表現を見つけた際にはご連絡ください。

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

目次（読みたいところへジャンプ！）

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

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

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

Google Maps APIサイトへ行く

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

＞＞Google Maps APIサイトへ

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

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

Google Maps Javascript APIをクリック

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

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

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

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

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

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

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

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

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

APIキーが発行される

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

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

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

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

＞＞API Console画面へ行く

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

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

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

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

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

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

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

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

Wordpress ブログ運営