Google Maps APIを使う

Googleが提供するGoogle Maps APIを利用すれば、Google マップをより自由に表示することができます。ここでは、API キーを作成して、WebサイトにGoogle マップを表示するまでの手順をまとめます。

Google アカウントを作成する

Google マップの「地図を埋め込む」では、特に用意するものはなかったのですけれど、Google Maps APIを使ってGoogle マップを利用するためには、いろいろと事前準備が必要になります。

まず、Googleのサービスを利用するには、Google アカウントを持ってないといけません。Google アカウントの作成については以下の、Google アカウントのヘルプページが詳しいので、参考にアカウントを作成してゆきます。

Google アカウントの作成 - Google アカウント ヘルプ

Google アカウントの作成に必要な情報は、姓名、ユーザー名、パスワード、生年月日と性別。電話番号とメールアドレスは、作成した後でも設定可能なので、最初はハショっても大丈夫。電話番号やメールアドレスは、アカウントを安全に管理したり、セキュリティを高めたりするのに利用されます。詳しくはGoogleのログインとセキュリティの項を参照のこと。
項目を入力したら、プライバシーポリシーと利用規約をころころと読み進めて、「同意する」ボタンをクリックします。

下図のページに移動すればアカウント作成完了;)。いよいよGoogle Maps APIを使う準備を進めましょう！

既にアカウントを持っている人はGoogle トップページの右上にある「ログイン」ボタンから、Googleにログインしておきましょう。

Google
トップページ以外にも、Googleの各サービスページ右上にある「ログイン」ボタンから、Googleにログインできます

Google Maps APIを使う準備

Googleのサービスは、「Google Cloud Platform」というサイトで管理することになっています。「Google Cloud Platform」では、Googleが持っている高度な技術や膨大なデータを、誰でも使えるように、APIやサービスとして提供しています。Google マップ以外にも、YouTubeやGmailのデータや技術を利用することもできるんですけれど、それはまた別のお話。ここでは、Google Maps APIを使えるようにするための手順を見てゆきます。

さっそく、Google Cloud Platformのサイトへ移動しましょう:D。

ホーム - Google Cloud Platform

いちばん最初のアクセス時には、上図の画面が表示されるので、利用規約に同意して、居住国を選んで、通知メールをどうするかチェックしたら「同意して続行」をクリックします。上部に表示されている「無料トライアル」のバナーについては、後述しますので、今はとりあえず閉じておいて大丈夫です:)

1. プロジェクトを作成する

まずはプロジェクトを用意します。Google Cloud Platformでは、プロジェクトごとに利用したいサービスを登録できるようになっていて、利用料金なども、プロジェクトごとに請求される仕組みになってるんですねー。

新しいプロジェクト作成ページへ移動する

一番上の「プロジェクトの選択」をクリックします。まだ何もプロジェクトが作られてないと思うので、右上の「新しいプロジェクト」をクリックして、プロジェクト作成ページへ移動します。

プロジェクト名はなんでもよいけれど、自分が管理しやすい名前にすると良いです

プロジェクト名はそのままでも良いですけれど、好きな名前に変更しても良いです（プロジェクトIDも、ここでなら変更可能です）。名前を決めたら「作成」ボタンをクリックします。
画面が切り替わって、通知がぐるぐる回って、じきに作成が完了したら、その通知をクリック。すると、作成したプロジェクトのダッシュボードページへ移動します。
さっきまで「プロジェクトの選択」だったところが、作成したプロジェクト名になっていればOK;)

2. APIを有効化する

次に、利用するAPIを有効化します。つまり、利用したいAPIを選んで使える状態にするための作業を行います。

左上の（さんぼんせん）アイコンをクリックしてメニューを引き出したらば、「APIとサービス」をクリック。APIとサービスのダッシュボードページへ移動するので、上の「APIとサービスの有効化」をクリック。
するとAPIライブラリのページへ移動します。Googleで利用できるAPIやサービスがカテゴリ別にたくさん並んでいるページ（下図左）で、この中から、利用したいAPIを選択します。

今回はWebサイトでGoogle マップを表示するため「Maps JavaScript API」を選択※。Maps JavaScript APIのページへ移動するので、「有効にする」ボタンをクリック。すこしぐるぐるした後、有効化が完了します。

※何をするためにどのAPI、サービスを利用すれば良いかは、自分で選んで判断するしかないです。以下のページにGoogleが提供しているサービスが紹介されてるので、参考にしてみるとよいかもです。

プロダクトとサービス  |  Google Cloud

改めてアイコンをクリックして、再びAPIとサービスのページへ移動して、API一覧の中に「Maps JavaScript API」があれば、万事OK;D！

3. API キーを作成する

いよいよAPI キーを作成します。

左のメニューから「認証情報」をクリック。「認証情報を作成」プルダウンを開いて、中から「API キー」を選択します。「API キーを作成しました」と出れば、API キー作成完了:D！「自分の API キー」の下の文字列が、API キーになります。これを覚えしておきます。

AIzaSyB7vSmOglb_rL8Ni2Pr6NsHd1XBgaL80fU
自分の API キー

ただし、ただ作っただけでは、誰でもどこでも使えてしまう状態なので、制限をかけないといけません。右下の「キーを制限」をクリックして、API キーに制限をかけにゆきましょう。

このページではAPI キーの情報を編集することができます。API キーの名前も変更できるので、管理しやすい名前に変更しておきましょう。

「キーの制限」では、利用するシチュエーションから、制限方法を選びます。今回はWebサイトで利用するので、「HTTP リファラー（ウェブサイト）」で制限することにします。下の入力欄にGoogle マップを利用する予定のURLを入力します。単純にhttps://lopan.jp/だけだと、トップページだけでしか使えなくなっちゃうので、ワイルドカード（＝*マーク）を利用して、https://lopan.jp/*と入力すれば、Lopan.jpのどのページでも使えるようになります。
Lopan.jpでは、「https://sample.lopan.jp/」でも使いたいと思っているので、ワイルドカードをさらに使ってhttps://*lopan.jp/*としました。（ごめんなさい、これだと「リファラーのドメインが無効です」と警告されてしまうので）*lopan.jp/*としました。こうすれば、「https://lopan.jp/」、「https://sample.lopan.jp/」はおろか、lopan.jpなら、どんなサブドメインでも使えるようになるって寸法です;D。

4. お支払い設定をする

さいごに、お支払いについての設定を行います。お支払いと聞くと“やだな”と感じるかもしれないですけれど、これを行わないと地図が表示されないので、恐れず設定に進みましょう:)。

おもむろに、アイコンからメニューを引き出して、「お支払い」をクリック。ここでは、プロジェクトと請求先アカウントを関連付ける（リンクする）ってことをします。ただし、プロジェクトと関連付けるための請求先アカウントがまだ作られていないので、まずは請求先アカウントを作らなくちゃいけません。
「請求先アカウントをリンク」ボタンをクリック。課金とか、請求という言葉にひるんでしまう気持ちをおさえて、「請求先アカウントの作成」をクリックします。

すると辿り着くのは、「Google Cloud Platform の無料トライアル」のページ。いちばん最初のアクセス時にあった「無料トライアル」のバナーも、同じく、このページへ誘導されます。

ステップ1では、国の選択、利用規約への同意と、通知メールをどうするか選んで、「同意して続行」をクリック。
ステップ2では、アカウントの種類、名前と住所、連絡先、お支払いタイプ、お支払い方法（カード番号※）を入力し、「無料トライアルを開始」ボタンをクリックすれば、晴れて、APIが利用可能になりますXD！

クレジット残高が、最初は33,916.00円となっていますね…、つまり300ドル分はここから支払えるということ。Google Maps APIを利用して地図を表示させたページが閲覧されるたびにこのクレジットから差っ引かれていくことになります。もしもこのクレジットを使い切ってしまっても、有料アカウントにアップグレードしない限り請求はされず、Google マップが表示されなくなるだけみたいです。

※クレジットカードの情報は、“身元の確認とロボットによる操作でないことを確認する目的でのみ使用”されるとのこと。

Google Cloud Platform の無料枠について、詳しくは以下のページを参照のこと。
よくある質問 | Google Cloud Platform の無料枠 | Google Cloud

下図、Google Maps Platformで公開されている料金表でいうと、「Google Maps APIを使ってWebサイトにGoogle マップを表示させる」のは、「Dynamic Maps」という項目にあたります。

「毎月 200 ドル分は無料」の列は「最大 28,000 読み込み」、「月間使用量（呼び出し 1,000 回あたりの料金）」の「0～100,000」回の列には「$7.00」とありますね。
つまり、Google マップが1回呼び出される毎に0.007ドルかかって、28,000回呼び出し（0.007ドル×28,000回＝196ドル（≒だいたい200ドル））までは無料、ということ。なので、28,001回呼び出された時点で、0.007ドル（≒0.8円）課金発生ということになります。ただし、無料トライアル期間中は、そこからさらに300ドルは無料、ということになるのかな…:ω？

料金表 | Google マップ プラットフォーム | Google Maps Platform | Google Cloud

その他、Google Cloud Platform（Google Maps Platform）について、詳しくは下記ページを参照のこと。
Google Maps Platform - 株式会社ゼンリンデータコム

Google Maps APIを使ってみる

さっそく、上で取得したAPI キーを使って、Webサイトにシンプルな地図を表示してみました！
下のサンプルのようなHTMLファイルを用意すれば、前述で制限した「lopan.jpドメイン」でのみ、Google マップが表示されるはずです;D。

基本的な表示方法

API キーは、HTMLにMaps JavaScript APIを読み込むところで、以下の要領で使われています。

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7vSmOglb_rL8Ni2Pr6NsHd1XBgaL80fU&callback=initMap" defer></script>

https://maps.googleapis.com/maps/api/jsの後に、?key=でつないで、API キーを記述します。
そのあとの&callback=initMapは、APIの読み込みが完了した後にinitMapという、JavaScriptの関数を実行させるための記述になります。実行する関数は以下の通り。

function initMap() {
	new google.maps.Map(document.getElementById('map'), {
		zoom: 15,
		center: { lat: 35.662, lng: 139.703 }
	});
}

google.maps.Map()というのが、Google マップを生成するための、Maps JavaScript APIに用意されている特別な関数で、()の中に、地図を表示させる場所と、地図の内容を指定します。ここでは一番シンプルな内容にしています。

new google.maps.Map(document.getElementById('map'), {

document.getElementById('map')は、id属性がmapの要素（つまり<div id="map"></div>）を表していて、この要素の中にGoogle マップを表示するように指定しています。
そのあと、,（カンマ）で区切って、{}の中に、地図の内容を指定します。

zoom: 15,

zoomは、Google マップの表示領域（拡大率）を指定します。この値が大きくなるほど表示領域が狭くなって、地図の内容が大きく、詳しくなってゆきます。

center: { lat: 35.662, lng: 139.703 }

centerは、地図の中心点の座標位置を指定します。座標位置は、{}の中に緯度と経度の値を指定することで表せます。latがlatitude（緯度）、lngがlongitude（経度）を表します。

Maps JavaScript APIの関数について、詳しくはMaps JavaScript APIの公式ドキュメントを参照のこと。
Overview | Maps JavaScript API | Google Developers