人気ワード

Copy Title & URL

Bookmark

Feed

Share

Google Maps API Key 設定方法

目次

  1. Google Maps APIキーを取得
  2. 取得したAPIキーのリファラ制限を設定
  3. Geocodig API の有効化
  4. サーチプラスfor不動産にAPIキーを設定
    1. APIキーの設定確認 ※Google Chrome拡張機能

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

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

Google Maps APIキーを取得

【サーチプラスfor不動産】Step1

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 Projyect」のみが表示されます。
適宜、プロジェクト名を設定し「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キーのリファラ制限を設定

【サーチプラスfor不動産】Step2

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

リファラ設定

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

APIキーの保護設定

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

認証情報の保護

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

Geocodig API の有効化

【サーチプラスfor不動産】Step3

サーチプラス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キーを設定

【サーチプラスfor不動産】Step4

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

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

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

map_02

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

APIキーの設定確認 ※Google Chrome拡張機能

Google Chromeにて、APIキーが正しく設定されているかのチェックを行う拡張機能 Google Maps Platform API Checker が提供されています。

右上の青い「Chromeに追加」ボタンより機能が追加できます。

【サーチプラスfor不動産】API確認ツール

拡張機能追加後、Chromeブラウザで確認したいページを開き、
画面右上のピンの色が「緑色」になっていれば、APIキーが正常に設定されています。

【サーチプラスfor不動産】APIのAPI確認

※赤・グレー色のピンの場合は、正しく設定されていない、Google Maps API自体が利用されていないなどの場合になります。設定を再度ご確認ください。

製品情報

不動産サイト構築システム「サーチプラスfor不動産」
製品サーチプラスfor不動産
概要不動産サイトの制作に最適なCMS不動産検索システム
自由なデザインで不動産検索・問合せ機能を追加

HTMLが直接記述できる
自由度の高いCMS不動産サイト構築システム

レスポンシブデザイン標準装備
選べるモジュールで多彩な不動産サイトに対応
URLhttps://estate.searchplus.jp/

関連記事