1.Google Maps APIとは？

「Google Maps API」とは、Google社が提供している高機能で世界中の地図データを扱っているGoogleマップを、さまざまなサービスで利用できるようにしたものです。AndroidやiOS向けアプリやWebサービスにGoogleマップを使用することができます。

Google Maps APIを使用することで、Google Mapの機能をウェブサイトやアプリに埋め込むことができます。
Google Maps APIについての詳細は、公式ホームページに記載されています。

公式ホームページ

今回は、Google Maps APIを使って、ウェブブラウザに地図を表示させる方法について学習していきます。

2.APIキーの取得方法

Google Maps APIを使用するには、APIキーを取得しなければなりません。
APIキーを取得するために、あらかじめGoogleアカウントを準備しておいてください。

Google アカウントの作成
https://accounts.google.com/signup/v2/webcreateaccount?hl=ja&flowName=GlifWebSignIn&flowEntry=SignUp&nogm=true

2-1.Google Cloud Platform にアクセス

APIキーを取得するために、まずはGoogle Cloud Platformを開きます。

まずは、以下リンク先を開いてください。

Google Cloud
https://cloud.google.com/

[コンソール]ボタンをクリックすると、次のような画面が表示されます。

2-2. プロジェクトを作成

次に、新規でプロジェクトを作成します。

画面左上にある、[プロジェクトの選択]ボタンをクリックすると、プロジェクトの選択画面が表示されます。

新規プロジェクトを作成するには、[新しいプロジェクト]ボタンをクリックします。

新規プロジェクト作成画面が表示されます。
プロジェクト名の欄に任意の名前を入力し、[作成]ボタンをクリックします。

プロジェクトが完成しました！

2-3. プロジェクトの選択

作成したプロジェクトを選択します。
再び、画面左上の[プロジェクトの選択]ボタンをクリックします。

プロジェクト選択画面が表示されるので、先ほど作成したプロジェクトを選択し、[開く]ボタンをクリックします。

これで、プロジェクトが選択されました。

2-4.APIの有効化

選択したプロジェクト内で、APIを有効化します。
画面左メニューから、[APIとサービス]にカーソルを合わせ、さらに、[ライブラリ]をクリックします。

APIライブラリが表示されます。

"Maps JavaScript API"を検索し、クリックします。

Maps JavaScript APIの概要画面が表示されます。
[有効にする]ボタンをクリックし、APIを有効化します。

これで、APIが有効化されました。

2-5. APIキーを取得

APIの有効化が完了すると、プロジェクトの[APIとサービス]の[ダッシュボード]に、有効化したAPIが追加されます。

ダッシュボードに表示されたAPI一覧から、"Maps JavaScript API"をクリックすると、次のような画面が表示されます。

[認証情報]タブをクリックします。
画面が表示されると、認証情報作成のウィンドウが開きます。

[認証情報を作成]ボタンをクリックし、さらに[APIキー]ボタンをクリックします。

Maps JavaScript APIのAPIキーが作成されました。
ウィンドウにて、取得したAPIキーを確認することができます。
[キーを制限]ボタンをクリックし、次の設定に進みます。

APIキーの制限設定画面が表示されます。
ここでは、そのままの設定で[保存]ボタンをクリックします。

Maps JavaScript APIの[認証情報]タブに、取得したAPIキー情報が表示されます。

これで、APIキーを取得できました。

3.コーディング

取得したMaps JavaScript APIのAPIキーを用いて、コーディングを行なっていきます。
今回は、簡単なサンプルを用いて、Google Maps APIによる地図の表示方法を紹介します。

3-1.サンプルコード

最も簡単な、マップを表示するだけのサンプルコードを紹介します。
以下のサンプルコードでは、ブラウザに指定した座標位置のマップを表示します。

・ APIをロード

index.html

<head>
<script src="http://maps.google.com/maps/api/js?key={APIキー}&language=ja"></script>
</head>

index.htmlのhaedタグに上記のコード記入し、Maps JavaScript APIをロードを行います
{APIキー}の部分には、先ほど取得したAPIキーを入れてください。

・マップの表示

bodyタグの中にdivで、マップ(id:map)をブラウザ画面上に配置します。

index.html

<body>
  <div id="map"></div>
</body>

・スタイルの指定

マップ(id:map)のスタイルを、高さ(height)500px、幅(width)100%に設定します。

style.css

#map{
  height:500px;      
  width:100%;
}

・スクリプトの記述

マップ(id:map)を表示するためのスクリプトを、bodyタグの一番下にscriptタグで記述します。

index.html

<script>
var MyLatLng = new google.maps.LatLng(35.6811673, 139.7670516);
var Options = {
 zoom: 15,      //地図の縮尺値
 center: MyLatLng,    //地図の中心座標
 mapTypeId: 'roadmap'   //地図の種類
};
var map = new google.maps.Map(document.getElementById('map'), Options);
</script>

以下に、スクリプトの中身を解説します。

・座標指定 LatLngクラスのインスタンスより、座標を取得します。ここでは、緯度：35.6811673、経度：139.7670516 を指定し、取得した座標情報を変数MyLatLngに入力しています。

var MyLatLng = new google.maps.LatLng(35.6811673, 139.7670516);

・オプション設定表示するマップのオプションを設定します。設定した内容は、変数Optionsに入力しています。

var Options = {
 zoom: 15,      //地図の縮尺値
 center: MyLatLng,    //地図の中心座標
 mapTypeId: 'roadmap'   //地図の種類
};

ここでは、zoom、center、mapTypeidの３項目について設定をしています。
center項目については、先ほど座標指定にて取得した座標情報(変数：MyLatLng)を指定しています。

設定項目	説明
zoom	必須項目。マップの縮尺値を設定する。
center	必須項目。マップの中心座標地を設定する。
map Typeid	初期に表示されるマップの種類を設定する。デフォルトはROADMAP。

上記以外にも、設定項目は存在します。
オプションの設定項目について詳細は、公式サイトのリファレンスで確認できます。

Google Maps Platform - Map Options interface
https://developers.google.com/maps/documentation/javascript/reference/3.exp/map?hl=ja#MapOptions

・マップ作成設定したオプション設定(変数:Options)を指定し、Mapクラスを利用して、マップを作成します。

var map = new google.maps.Map(document.getElementById('map'), Options);

3-2 画面

ブラウザで確認すると、下図のような画面が表示されます。

Googleマップの画面が表示されれば成功です。

なお、誤ったAPIキーを入力して、htmlファイルを実行すると、以下のようにエラー画面が表示されます。この場合はhtmlファイルを見直してください。

＊　自分はAPIの使うにあたり支払い設定をしていませんでした！

最後に注意しておきたいのが、新しい料金体系では、毎月200ドル分は無料で使用することが可能ですが、それを超えると利用料金を支払う必要があります。

Google Maps Platform - お客様のニーズを満たす柔軟な価格プラン
https://cloud.google.com/maps-platform/pricing/?hl=ja

個人で検証用に利用する範囲であれば、無料枠を超えることはあまりなさそうですが、
念のため、APIの割り当で上限を設定しておくとよいかもしれません。