その他編 6　Googme Maps APIキーの取得

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 使用の上限設定

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

6-1

　APIキー取得手順

「Google Maps APIs」へアクセスします。「キーを取得」をクリックします。

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

　

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

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

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

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

　両方登録してください。

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

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

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

▲TOPへ戻る

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を利用している処理は使用金額が大きいので、利用する場合には注意が必要。

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

「ライブラリ」をクリック

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

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

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

各、設定をしたいAPI画面＞「有効にする」をクリックします。
ブラウザの「」戻るボタンをクリックし前の画面に戻ります。（２～３回クリックし戻ります）

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

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

▲TOPへ戻る

★	不要なAPIキーの削除

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

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

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

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

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

▲TOPへ戻る

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アカウントにログイン

２、

Transition Tool

をクリック。

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

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

４、【Authorize】をクリック

移行ツール

Google Maps Platform移行ツールへようこそ。
既存のプロジェクトに請求を追加したり、キーを保護したり
新しいGoogle Maps Platformコンソールで入学手続きを進めていきます。
開始する前に、プロジェクト設定を検査するための承認が必要です。

このツールを承認しない場合は、
「既存のユーザーのためのガイド」を参照してください。

５、複数のアカウント選択が出た場合は【APIキーを取得したアカウント】を選択

⇒

メールアドレス・PWを入力し【次へ】

６、Transtion Tool画面＞【Add Billing】クリック

※複数のプロジェクトがある場合は
　【Add Billing】がプロジェクトの数だけ出てきます。

　　　

不要なプロジェクトを削除したい場合は
こちらをご確認ください。

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

７、「請求先のアカウントの作成」をクリック　　　　※詳細はこちらをご確認ください。

８、「日本」が選択されている場合は「AGREE AND CONTINUE」クリック　※他国が選択の場合は「日本」にしてください。

９、「お客様情報」を入力し「START MY FREE TRIAL」をクリック

2018年8月現在
お支払いででご利用いただけるカードは下記になります。

　MM/YY　⇒　　月/年
　
　CVC　　⇒カード裏のセキュリティーコード
　※各カード会社にお問合せください。

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

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

　Google Cloud Platform Console　

にアクセスをする

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

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

　　　　　▲TOPへ戻る　　

6-4

　複数のMyProjectがあり、削除をする場合

間違って作ってしまったMyProjectがある場合は、整理することができます。

１、上部の【MyProject】をクリック＞

をクリック

２、削除したいMyProjectを選択＞削除

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

４、閉じる

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/１日となります。

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

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

②　左上のメニュー＞APIとサービス＞「ダッシュボード」

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

④　上限設定をしたい「Maps JavaScript API 」「Maps Embed API」「Maps Static API」などのリクエスト数を確認する
　　※メモを取っておくことをおすすめします

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

（例）Maps JavaScript API　リクエスト数4029÷31日＝約130/1日

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

上限設定をする

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

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

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

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

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

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

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にお問い合わせいただきますようお願いします。