その他編 その他編一覧へ戻る テクニック集トップへ戻る

@dream活用やインターネット不動産運営で役立つ
便利なソフトや設定のご案内をしています。


6  Google Maps APIキーの取得
   
 2018/6/11〜ウェブ上でGoogleMapを利用するためにはAPIキーが必要になりました。詳細はこちら
 @dreamでの設定前に、下記手順でGoogle Maps APIキーを取得Google Maps Platform(支払い情報登録)をしてください。 

 Google ChromeからGoogleにログインしてから進めてください。
 
※Internet Explorerからでは、うまく取得することができません。

 ※Progre賃貸8.16.2未満、売買9.16.8未満をご利用の場合は、GoogleMaps APIキーの設定欄がございません。
  GoogleMapをご利用される場合には、verアップが必要となりますので、サポートまでご相談ください。


 ・6-1 APIキー取得手順
6-2 有効なAPIキーの確認方法と追加方法
不要なAPIキーの削除
6-3 Google Maps Platform(支払い情報登録)   (GoogleAPI取得済みの場合こちら
6-4 複数のMyProjectがあり、削除をする場合
6-5 API 使用の上限設定
6-6 有料アカウントへのアップグレード

 GoogleMapについての仕様・動作・解析につきましては弊社ではサポートいたしかねます。
 ご不明な点はGoogleMapヘルプ、またはGoogleにお問い合わせいただきますようお願いします。

6-1  APIキー取得手順
   
 「Google Maps APIs  へアクセスします。「キーを取得」をクリックします。

 ※すでに作成済みで修正や追加する場合はこちらのリンクから入ってください。

 

 
 「新しいプロジェクト」画面>「作成」クリック     ※2回目以降アクセスする場合はこちら
 


 「プロジェクトの選択」>作成したプロジェクトを選択>「開く
 


認証情報」画面が表示されます。
「●HTTPリファラー(ウェブサイト)」を選択>自社ドメインを入力します。

例)*.自社ドメイン/* (半角* ドット ドメイン スラッシュ 半角*) 
  自社ドメイン/*(ドメイン スラッシュ 半角*)

 両方登録してください。


「保存」をクリックします。
     


APIキーを作成しました 画面>「キーを制限」



APIキーが作成されました。
続けて次の手順に進んでください。 6-2 有効なAPIキーの確認方法と追加方法



APIキーの作成は以上で終了です。APIキーはメモ帳などに貼り付けて保存しておくことをお勧めします。

6-2  有効なAPIキーの確認方法と追加方法
  ダッシュボード」をクリックして、API一覧を表示させます。



  各APIの役割について
 Maps JavaScript API  動的HP、静的HPで使用するマップ、及びストリートビューでリクエスト発生
 Maps Static API  静的HP携帯用ページで使用するマップでリクエスト発生
 Maps Embed API  レスポンシブHPで使用するマップ、及びストリートビューでリクエスト発生
 Directions API  動的HP、静的HPで使用する2点間の距離表示でリクエスト発生
 Places API  iPadページで使用する場所(コンビニ、学校とか)検索でリクエスト発生
 ※Places APIを利用している処理は使用金額が大きいので、利用する場合には注意が必要。
 Geocoding API  主にBeginページなどで使用する地図の緯度経度取得でリクエスト発生

「ダッシュボード」に
「Google Maps JavaScript API」や「Google Static Maps API」「Google Maps Embed API」や
「Directions API」「Places API」「Geocoding API」がない場合


ライブラリをクリック



APIライブラリ」画面>マップ  「すべて表示」をクリック



APIライブラリ マップ全て表示画面>
Google Maps JavaScript API」「Google Static Maps API」「Google Maps Embed API」「Directions API」「Places API」「Geocoding API
運用によりこの5つが必要なので、探してください。
※ブラウザの画面表示大きさにより、APIの表示場所は違います。

ダッシュボードでなかったAPIを選択してください。



各、設定をしたいAPI画面>「有効にする」をクリックします。
ブラウザの」戻るボタンをクリックし前の画面に戻ります。(2〜3回クリックし戻ります)


※APIが有効になっている場合は「管理」という表示になっています。



■取得したAPIを@draemに登録設定は静的ページこちらから 動的ページはこちらから

 不要なAPIキーの削除

複数APIキーを作成していた場合、不要なAPIキーを削除することができます。

メニュー>API APIとサービス>認証情報



古いAPIを選択>ゴミ箱 クリック 



どのAPIキーを設定しているかは、@draemソフト各 下記設定個所をご確認ください。

■静的ページ…HPアップロード>HP編集>HP基本設定>地図設定>Google Maps APIキーを入力してください。
■動的ページ…動的HP>デザイン>その他>Google Maps APIキー



6-3  Google Maps Platform(支払い情報登録)
   
 米国時間 5月 2 日、「Google Maps Platform」という新サービスが発表されました。
 ※連絡先の登録がしっかりとされている場合で、
   Google Maps APIを利用している方は、5月3日に英文メールが届いている様です。

 詳細はこちら⇒

APIキー無しのGoogleマップ表示も6月11日以降はサポートされなくなり、
現在、表示されていたとしても、エラー表示になってしまうようです。
詳細につきましては、参考になるページがございますのでご確認ください。【Google Maps Platformとは?

※6/11 Google Maps Platformの適用開始が7/16に延期になったようです。

 GoogleMapについての仕様・動作・解析につきましては弊社ではサポートいたしかねます。
 ご不明な点はGoogleMapヘルプ、またはGoogleにお問い合わせいただきますようお願いします。


 ■APIキーを持っている場合

APIキーとアカウントを紐づけ、アカウントに支払い情報を登録します。
※APIキーの設定をされていない場合は、こちらの手順をご確認ください。

※クレジットカードが有効期限切れになってしまった場合、地図が表示されなくなります。
  クレジットカードが更新されたら、支払い情報のところより情報更新しましょう。


、APIキーを取得したGoogleアカウントにログイン


  ※ログインをしている場合でも再度ID PWを求められる画面がでる場合があります。
  ※GoogleAPIキーを取得したアカウントのID・PWをご確認の上、手順をお進みください。

Googleアカウント画面>GoogleAPIキーを取得したアカウントを選択>「許可する」クリック

※変更詳細などは既存のユーザーのためのガイドをご確認ください。


 Google Maps APIs   へアクセスをします。

3.左上「ナビゲーションメニュー」>「お支払い」クリック  ※詳細はこちらをご確認ください


4.お支払い画面>「請求先アカウント」バナーをクリック
  ※登録状態によって、バナーなどの文言が若干違います。

 初めてアクセスした場合  2度目以降で支払い登録ができていない場合
   
  支払い登録が済んでいる場合は↓のような画面に変わります。

 

5.ステップ1/2画面>利用規約にチェック>「同意して続行」クリック



、「お客様情報」を入力し「無料トライアルを開始」をクリック
     
 2018年12月現在
お支払いででご利用いただけるカードは下記になります。
 
 MM/YY ⇒  月/年
 
 CVC  ⇒カード裏のセキュリティーコード
 ※各カード会社にお問合せください。


 GoogleMapについての仕様・動作・解析につきましては弊社ではサポートいたしかねます。
 ご不明な点はGoogleMapヘルプ、またはGoogleにお問い合わせいただきますようお願いします。

 
 ※クレジットカードが有効期限切れになってしまった場合、地図が表示されなくなります。
   クレジットカードが更新されたら、支払い情報のところより情報更新しましょう。


  支払い登録情報を有効化にしよう

支払い登録を有効化にしないと、ホームページで公開をしているGoogleMapがエラーになり
表示ができない可能性があります。
支払い登録後、きちんと有効化にしていきましょう。

   Google Cloud Platform Console   にアクセスをする




左上「メニュー」>「お支払い」 右側に支払い情報が出ていれば有効化になっています。



全ての作業が終了したら、ホームページの公開している地図を確認してみましょう。

6-4  複数のMyProjectがあり、削除をする場合
   
間違って作ってしまったMyProjectがある場合は、整理することができます。

、上部の【MyProject】をクリック>をクリック


、削除したいMyProjectを選択>削除


、プロジェクトIDが入力項目の上に表示されているので、IDをコピー貼り付けシャットダウン


閉じる



 GoogleMapについての仕様・動作・解析につきましては弊社ではサポートいたしかねます。
 ご不明な点はGoogleMapヘルプ、またはGoogleにお問い合わせいただきますようお願いします。


6-5  API使用の上限設定

API ごとに使用の上限設定をすることができます。
GoogleMapでは、地図のページが読み込まれるごとにカウントされるとされています。→Googleよくある質問
同一ページでもF5更新を頻繁に行うと更新ごとに1カウントとなるようです。
必要に応じて、設定をしてください。

※2018年11月時点 Googleは28,500回を上限とし課金対象としているようです。
  上限いっぱいの設定にしてしまうと、その他で利用していた場合課金対象となる可能性もあるため
  上限設定の変更はよく考えてからするようにしましょう。



上限設定をすることにより、googlemap API の新しい課金プランについて無料枠を超えないように制限をかけることもできますが
制限をかけたことにより、上限に達した場合GoogleMapがエラー表示になってしまう可能性もあります。
上限設定をする場合には、エンドユーザー様のことを考えて適切な数字を設定するようにしましょう。


ここでは、どうやって設定をすればよいのか、簡単に説明をしていきます。

1日の平均リクエスト数を計算する

2018年11月時点 Googleは28,500回を上限とし課金対象としています。
単純に考えると28500上限÷31日=約919/1日となります。

※Directions API(無料枠40,000リクエスト/月)・Places API(無料枠5,000リクエスト/月)など
  APIによっては無料枠が違うので、そちらも考慮し設定をしましょう。  APIの役割についてはこちら

しかし、複数のAPIを利用している場合、合算となるためそのまま設定してしまうと
意図しない上限設定になってしまうことになります。
利用しているAPI上限割り付けは、どのくらいが適切なのか、リクエスト数を確認し考えていきましょう。


@ 「Google Clpud Platform」にアクセスをします。

A 左上のメニューAPIとサービス>「ダッシュボード


B 右上>表示期間を「30日」に切り替える

C 上限設定をしたい 「Maps JavaScript API 」「Maps Embed API」「Maps Static API
   「Directions API」「Places API」「Geocoding API」などの
リクエスト数を確認する。   APIの役割についてはこちら
  ※メモを取っておくことをおすすめします




D Cで確認をした30日のリクエスト数をもとに基準値を出す

(例)Maps JavaScript API リクエスト数4029÷31日=約130/1日

※計算値のまま設定してしまうと、少しアクセスが増えると上限に達してしまうことになるので、
  計算値プラス余裕を持たせた数値にしましょう。

上限設定をする

【loads per day→1日の表示上限

1日に読み込める表示の上限となります。
ページを閲覧する全ユーザー合計数の表示上限となりますので
先ほど1日の平均リクエスト計算をした数字をもとに設定をしてみましょう。


@上限設定をしたいAPIをクリックする
  ※ここでは、「Maps JavaScript API」で説明をします。

A 割り当て名「Map loads per day」えんぴつマークをクリック
   ※各APIによって割り当て名は変わります。

B Map loadsの割り当て量上限>決めた数字を入力
   ※無制限のチェックを外さないと数字入力はできません。


C数字を入力すると「確認」が出てきます。
  内容をよく読んで確認し、チェックを入れると「保存」することができます。



100秒あたりの上限について

APIにより、名称は違いますが100秒あたりの制限を設定することができます。



【100 seconds→100秒あたりの読み込み上限

100秒間に読み込める回数の上限となります。
多くても50〜100くらいで、いいかもしれません。
計算して出した、1日のリクエスト数を目安に設定してください。


【100 seconds per user→100秒あたりの1ユーザーの読み込み上限

1ユーザーが100秒の間に読み込める回数の上限です。
1ユーザーの人が、100秒の間に数ページを次々に見ることを踏まえつつ
いたずらなどで、F5(ページ更新)連打された場合を考えて設定をしてください。
目安としては5秒で1ページを開いたとしても、100秒なら20回ということです。
※こちらも上限には多少余裕を持たせるようにしましょう。



GoogleMapAPIについての仕様・動作・解析や上限設定値につきましては弊社ではサポートいたしかねます。
ご不明な点はGoogleMapヘルプ、またはGoogleにお問い合わせいただきますようお願いします。



6-6  有料アカウントへのアップグレード
   
Google Cloudヘルプより抜粋

以下のいずれかの条件が満たされると、トライアルが終了します。

  • 登録後 12 か月が経過した場合。
  • $300 相当のクレジットを使い切った場合。
 詳細はコチラからご確認ください。Google Cloudヘルプ「12 か月間 $300 分の無料トライアル」

トライアル期間が終了すると、物件ページのGoogleMapがエラー表示になってしまいます。


※Googleからの通知受取り設定をしている場合には、英語ですがメールにてアナウンスが入るそうです。
 普段から通知をOFFにしている場合は、メールは届かないので
 ご自身でGoogleAPI「My Project」支払い登録にアクセスし、ご確認していただく必要がございます。

Google Cloudヘルプより抜粋
「クレジット残額と無料トライアル残日数は、無料トライアルの期間中、Google Cloud Platform Console の上部に表示されます。」


※お知らせがONになっていると、下記のように英語でGoogle Cloud Platformよりメールが届きます。


 ■有料アカウントへのアップグレード確認をする

Google Cloudヘルプより抜粋
「アカウントには 30 日間の猶予期間があり、この期間中に、トライアルの期間中に使用したリソースとデータを復元できます。」
「トライアルの終了から 30 日が経過すると、無料トライアルのリソースが失われます。」
 詳細は「無料トライアルの終了」についてをご確認ください。

トライアル終了から30日間内でのアップグレードをおすすめいたします。

1  Google Maps APIs   へアクセスをします。

左上「ナビゲーションメニュー」>「お支払い」クリック  



2.お支払い画面「概要」>右上「アップグレード」をクリック
 ※無料トライアル中の場合は のボタンになっています。(残り日数も○日と表示されています)
※無料トライアル終了の場合 の場合もあります。(30日以上過ぎた場合など)






3.ポップアップの「アップグレード」をクリック
     


アップグレードが完了しました。

GoogleMapやGoogle Cloud Platformについての仕様・動作・解析につきましては弊社ではサポートいたしかねます。
ご不明な点はGoogleMapヘルプ、またはGoogleにお問い合わせいただきますようお願いします。


  ■Google Cloud Platformヘルプ
・ 無料トライアルの終了について  有料アカウントへのアップグレード
 無料トライアル終了後の費用 サポートの利用



     ▲上へ           
その他編一覧へ戻る