ホームページ

たった5つの工程で、Maps JavaScript APIの取得と安全設定

MapsJavaScriptAPIホームページ

こんにちはチョッカです。

自分のWebサイトに、シンプルなGoogleMapを表示するだけなら、
APIキーを取得する必要はありません。

過去に作成した以下の記事を参考にしてください。

ただし、ピンを立てたマップを表示したり、現在地を中心としたマップを表示できれば、もっとユーザーに優しくなるんだけどな。というケースもありますよね。

そんな場合は、”API” を使わないと実現できません。
API“と聞いて、反射的に抵抗してしまった方、大丈夫です。
画像を用いて詳しく説明してありますので、この通りにやれば簡単です。

たった5つの工程で、APIキーを取得から後々困らない設定まで

大きく分けて工程はたったのです。

  1. Google Cloud Platformでプロジェクトを作成
  2. Maps JavaScript API を有効化
  3. APIの使用数の上限を設定
  4. APIキーを作成
  5. APIキーを誰でも使えないように制限をかける

それでは、各工程を説明していきます。

工程1:Google Cloud Platformでプロジェクトを作成

Google Cloud Platformにアクセスします。

プロジェクトの選択をクリックします。

MapJSAPI手順画像01

新しいプロジェクトをクリックします。(もしくは既存のプロジェクトを選択して下さい)

MapJSAPI手順画像02

プロジェクトを作成します。

MapJSAPI手順画像04

プロジェクトができました。

MapJSAPI手順画像05

工程2:Maps JavaScript API を有効化

APIとサービス > ライブラリ をクリックします。

MapJSAPI手順画像06

Maps JavaScript APIをクリックします。
もし表示されていない場合は、マップの右にある”全て表示”をクリックしてください。

MapJSAPI手順画像07

有効にするをクリックします。

MapJSAPI手順画像08

これで、APIは有効になりました。簡単でしょ。

工程3:APIの使用数の上限を設定(割り当て)

APIを設置するサイトが攻撃されるなどにより、APIが異常に使用されると、
Googleからの請求額も大きくなってしまいます。
そんな事態を防ぐために、ロードできる上限数を設定しておきましょう。

APIを有効にするとAPIの設定画面に移りますので、割り当てをクリックします。

MapJSAPI手順画像16

下に、ロード回数の上限を設定する箇所があるので、鉛筆ボタンをクリックして設定しましょう。

MapJSAPI手順画像17
MapJSAPI手順画像18
Map loads per day1日にロードできる上限
Map loads per 100 seconds100秒間のロードできる上限
Map loads per 100 seconds per user1ユーザーが100秒間にロードできる上限

マップがロードできないと、ユーザー体験に影響するので、アクセス数などを考えて、
ユーザーに影響が出ない数値に設定
するのが良いです。

あとで説明しますが、絶対にAPI使用料を払いたくないという方は、1日にロードできる上限を921にしておけば無料の範囲内になります。(2020年5月12日時点)

工程4:APIキーを作成

APIとサービス認証情報をクリックします。

MapJSAPI手順画像109

認証情報を作成をクリックした後、APIキーをクリックします。

MapJSAPI手順画像110

APIができましたので、続いてキーに制限をかけます。

MapJSAPI手順画像111

工程5:APIキーを誰でも使えないように制限をかける

APIキーを作成しただけでは、誰でもキーを使用することができてしまいます。

他の人がたくさん使って、その分まで自分に請求がきてしまう
なんてことにもなりかねません。

そこで、特定のサイトだけでAPIキーを使用できるように制限をかけます。

アプリケーションの制限から、HTTPリファラー(ウェブサイト)を選択し、
ウェブサイトの制限から、項目を追加をクリックします。

MapJSAPI手順画像112

新しいアイテムのリファラーに、APIを使用するサイトのURLを入力し、完了をクリックします。

MapJSAPI手順画像113
トップページだけの場合(サブドメインなし)https://sample.com/
トップページだけの場合(サブドメインあり)*.sample.com/
サイト全体の場合(サブドメインなし)https://sample.com/*
サイト全体の場合(サブドメインあり)*.sample.com/*
sample.com の部分を、ご自身のサイトのURLに変更してください。

APIの使用料(完全無料ではないので注意!)

google.maps.Map() クラスを使ってマップを生成した場合、
マップのロード数に応じて費用がかかります

月間のロード数に応じて、1ロードの単価も変わります。

月間のロード数0–100,000100,001–500,000500,000以上
単価/ロード0.007 USD0.0056 USDセールスに連絡
注:モバイルアプリの場合(Google Maps SDK for AndroidやGoogle Maps SDK for iOSを使用)は無料です。

えっ! お金がかかるの?と思った方もいると思いますが、
少し安心してください。

毎月200USD分を、Googleがプレゼントしてくれます。(2020年5月12日時点)

よって、単純に計算すると、28571回までは無料になります。
31日で割ると、1日921回まで無料です。

1日に1,000回以上地図を表示する見込みのある方は、Googleから請求が来ると思っておいた方が良いでしょう。

ただし、今後200USDのプレゼントやロードあたりの単価が変わる可能性もあるので、
最新情報は Googleのサイトで確認してみてください。

まとめ

完全無料ではないとはいえ、GoogleMapをうまく活用することで、
ユーザーにとって大きなメリットのあるサイトに変えることができます

私は、ユーザーが現在地の近くにある、あるジャンルのお店を探すサイトを作った際に、
このMaps JavaScript APIのほか、Geocoding API, Geolocation API を使いました。

費用が不安な方は、1日に使用できる上限数を少なめに設定しておけば安心です。
ただし、上限数を超えると地図が表示されず、ユーザー体験のマイナスになってしまうので、
実装するサイトの目的などを考慮し、設定して下さい。

GoogleMapを駆使したものなど、ユーザーに優しいサイト作りでお困りの方は、チョッカまでお気軽にお問い合わせください。

タイトルとURLをコピーしました