人気ワード

Copy Title & URL

Bookmark

Feed

Share

Google Maps API Key 設定方法
"

2018年からGoogle Mapsを利用する際には、「APIキー」が必須となりました。

APIキーを設定していない場合は、管理画面・Web画面ともにエラー表示となりますので、必ず設定してください。

Google Maps APIキーを取得

Google Maps APIキーを取得するためには、あらかじめGoogleアカウントを取得しておく必要があります。

Google Maps APIキー取得に必要なもの

  • Googleアカウント
  • クレジットカード情報

まだ、Googleアカウントを取得していない人はこちらから取得してください。


Googleアカウントの取得ができたら、以下のURLをクリックして、Google Maps Platformに移動しましょう。

Google Maps Platform

Google MapsPlatform

Google Maps Platformに移動したら、「使ってみる」をクリックしましょう。

プロダクト選択(Maps)

今回はGoogle MapsのAPIキーを取得するので、「Maps」にチェックを入れて「CONTINUE」をクリックします。

プロジェクトの選択

プロジェクトを選択します。
初めて取得する場合は「My Project」のみが表示されます。
適宜、プロジェクト名を設定し「NEXT」をクリックします。
※「NEXT」をクリックすると、初めての場合に再度「Maps」を選択する画面に戻ってしまいますが、再度同じ設定を行ってください。

請求先アカウントの作成

プロジェクトを選択し、「NEXT」ボタンをクリックすると、「請求の有効化」画面に切り替わります。
そのまま「請求先アカウントの作成」をクリックしてください。

無料トライアルの設定

無料トライアル画面に切り替わりますので、必要な項目を設定し、「同意して続行」をクリックします。
※「最新情報をメールで受け取る」チェック項目に関しては、任意で設定してください。

無料トライアルの設定(詳細設定)



アカウントの情報から、「名前と住所」、「お支払いタイプ」「お支払い方法」まで設定してください。
※2018年7月16日よりGoogle Maps APIキーを取得するには、「お支払い方法」でカード情報の入力が必須になりました。

Google Maps APIキーの利用は、マップへのアクセス数によって料金が変わります。(ほとんどの利用者は無料枠内で利用可能)
詳細が気になる方は次の公式記事を参照ください。
価格とプラン | Google Maps Platform

お支払い方法の登録が完了すると、APIが有効となったことを示すポップアップが表示されます。

API有効設定

「次へ」をクリックすると、あなたの「API Key」が表示されます。

あなたのAPIKey

この時点で、発行された「Google Maps Api Key」は使用できますが、セキュリティの観点から使用するドメインに制限をかけます。

「DONE」をクリックして設定を終了します。

取得したAPIキーのリファラ制限を設定

リファラ制限の設定は、「Google Cloud platform」のコンソール画面で行います。

リファラ設定

コンソール画面では、使用しているAPIキーの状況を確認できます。
「OK」をクリックして、コンソール画面を開きます。

APIキーの保護設定

①「新しいAPIキーを保護する必要があります。」と表示されていることを確認します。
②「認証情報を保護」をクリックして、設定画面に切り替えます。

認証情報の保護

①「HTTPリファラー(ウェブサイト)」にチェックを入れます。
②フォーム内の記述例を参考に、ワイルドカードを使用してあなたがGoogleMapを使用する予定のドメインを設定してください。

Geocoding API の有効化

サーチプラスforショップでは、管理画面内で、住所からマップ情報を取得する際、「緯度、経度」の取得も行っています。

そのため、取得した地図を表示する「Maps JavaScript API」に加えて、「緯度、経度」を取得する権限を持つ「Geocoding API」も有効にする必要があります。

Geocoding APIのAPI設定

Google Maps Platformのコンソール画面上で、左側のメニューから「API」をクリックします。

Geocoding APIのリンク

「使用中のAPI」と「未使用のAPI」が表示されます。
未使用のAPIの「Geocoding API」をクリックします。

Geocoding APIを有効にする

「Geocoding API」の詳細画面が表示されるので、「有効にする」をクリックします。

以上の設定で、今回取得した「Google Maps API Key」での必要な設定は完了です。

サーチプラスforショップにAPIキーを設定

以上の手順より、Google Maps APIキーの取得ができたら、サーチプラス側で設定を行います。

システム設定(Google Maps)
サーチプラスforショップの管理画面

システム設定 > サイト設定」の
「Google Maps API Key」の項目に、取得したAPIキーを設定してください。

map_02

APIキーの設定を行うと、登録したデータの住所に応じてGoogle Mapsが表示されます。

関連記事