Google Mapが2018年7月16日からAPIキー必須&有料に!(サンプルコード付)

Google Mapが2018年7月16日からAPIキー必須&有料に!
(サンプルコード付)

サイトやアプリに埋め込むGoogle Mapsが2018年7月16日からAPIキーが必須なり、使用量に応じて課金されるようになりました。
この条件を満たしていないと、利用されているGoogle Mapsが突然表示されなくなるかもしれません。

1対応が必要なサイトまたはアプリ

①APIキーを利用していない

APIはGoogle Mapsの機能をJavaScriptなどのプログラムで呼び出す仕組みです。これらのプログラムを使用する際に、呼び出し元のサイトまたはアプリを識別するために使用されます。
APIキーの取得の仕方は後述します。

 

②マップロード数の上限を超えてしまっている

今回の仕様の変更で、地図の読み回数750,000回/月が無償だったのに対し、28,000回/月(動的な地図の場合)と大幅に減少しました。
無償範囲を超えて使用した場合は、1,000回ごとに右のように使用料が発生します。

 無償分(200$)0~100,000100,001~500,000
Embed読み込み無制限$0.00$0.00
Static Maps最大 100,000 読み込み$2.00$1.60
Dynamic Maps最大 28,000 読み込み$7.00$5.60

※500,001 以上は個別対応 ※Embed(iframeで埋め込み)、Static Maps(静的地図)、Dynamic Maps(動的地図)

制限を超えて地図が表示されなくなったと慌てないうちに、Google Cloud Platformから支払い設定を行いましょう。
Google Cloud Platformのダッシュボードの左メニュー「お支払い」から設定できます。

https://console.cloud.google.com/?hl=ja

2地図の表示方法の確認

Google提供するChrome用の「Google Maps Platform API Checker」という機能拡張ツールがあります。

機能拡張をインストール後、Chromeで確認したいページを開いて、ブラウザの右上にあるピンの色を確認してください。ピンの色によってAPIキー対応の有無がわかります。

https://chrome.google.com/webstore/detail/google-maps-platform-api/mlikepnkghhlnkgeejmlkfeheihlehne?hl=ja

  • 緑のピン
    API Keyが登録・設定されています
  • 赤のピン
    API Keyの設定が行われていない可能性があります
  • グレーのピン
    Google Maps APIsが利用されていません

3APIキーの設定方法

Google Maps Platformにアクセス。
※Google Accountにログインしていない場合はログイン後、右上の「スタートガイド」か、左下の「使ってみる」をクリック。
https://cloud.google.com/maps-platform/

  • STEP.1 APIキーの作成
  • STEP.2 APIキーの認証
  • STEP.3 APIキーの使い方

STEP.1APIキーの作成

Pick product(s) below
プロダクトの選択画面になります。最終的に使用APIを選択することになるので、ここでは全てにチェックで大丈夫です。

Select a project +Create a new projectを選択し、任意で名前をつけて「NEXT」をクリック。

請求先情報の登録画面になるので「請求先アカウントの作成」をクリック。

国を選択、受諾と利用規約で「はい」を選択後、「同意して続行」をクリック。

お客様情報とクレジットカード情報を入力。

お客様情報とクレジットカード情報を入力するとAPIの有効化に移行します。

APIの有効化が完了したら APIキーが表示されます。

  • STEP.1 APIキーの作成
  • STEP.2 APIキーの認証
  • STEP.3 APIキーの使い方

STEP.2APIキーの認証

APIキーを使用できるウェブサイトを指定することでAPIキーに認証をかけます。
これによりAPIキーの利用を制限する事できます。
APIの概算に移動をクリック。

「有効なAPIまたはサービスがありません」とでるので「APIとサービスの有効化」をクリック。

APIライブラリのページで「Maps JavaScript API」をクリック。

「有効にする」をクリック。

Google Chrome Platformのトップページ移動し「APIの概算」をクリック。サイドメニューから「認証情報」をクリック。

「認証情報を作成」ボタンを押して 「ウィザードで選択」エリアをクリック。

ウィザードは「Maps JavaScript API」を選択して「必要な認証情報」ボタンをクリック

APIキーが新しく作られ流ので「キーの制限」をクリック。リファラーの設定を行います。
//*.example.com/*
この書き方をすると、http・httpsにかかわらず、ドメイン内全てに適用されます。
URLを入力したら「保存」ボタンをクリック。

  • STEP.1 APIキーの作成
  • STEP.2 APIキーの認証
  • STEP.3 APIキーの使い方

STEP.3APIキーの使い方

以下のコードはサンプルコードです。
表示したい箇所の緯度をlatに、経度をlngにを入力し、YOUR_API_KEYに作成したAPIキーを入力します。これでAPIキーを使ったGoogle Mapが表示されます。

<>

4シンプルに表示させたい方のために

静的な地図を使用してロード回数を増やす

動的な地図の場合28,000回/月が無償分となりますが、これを静的な地図に変更して100,000回/月まで利用する方法です。
静的地図は、動的地図のように地図の移動などはできませんが、非常に軽量なので表示速度が上がります。

  • src=”http://maps.googleapis.com/maps/api/staticmap? ⇒ グーグルの地図を使用する宣言。
  • center=緯度,経度 ⇒ 中心の座標の設定。
  • &zoom= ⇒ 拡大率。
  • &size=625×420 ⇒ 表示サイズは横625pxで縦420px。
  • maptype=roadmap ⇒ 道路地図タイプで表示。
    (satellite: 航空写真、terrain: 地形図、hybrid: 航空写真と道路地図の組み合わせ)
  • &markers=color:red ⇒ マーカーの色を指定。
    (black,brown,green,purple,yellow,blue,gray,orange,white から指定)
  • %7Clabel:T ⇒ マーカーの中は「T」を表示。(半角英数一文字)
  • %7C緯度,経度 ⇒ マーカーの位置の座標指定。

このように設定すると、画像として地図が表示されます。

K.O

K.Oウェブ・ディレクター

投稿者プロフィール

2016年11月

この著者の最新の記事

関連記事

コメントは利用できません。

Facebookページ

アドイロのSNS


ページ上部へ戻る