Google Maps API を使ってみた

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

公式ホームページ
https://developers.google.com/maps/?hl=ja

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

# 2. APIキー取得
Google Maps APIを使用するには、APIキーを取得しなければなりません。
※ 2016年6月11日から、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/

リンク先にアクセスできましたら、画面右上にある、[コンソール]ボタンをクリックします。

![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/06107fbb-8932-08f4-1d5c-f11ced1a333b.png)

[コンソール]ボタンをクリックすると、次のような画面が表示されます。
![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/652ab33b-d814-4270-ece4-c1a080b8ec19.png)


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

画面左上にある、[プロジェクトの選択]ボタンをクリックすると、プロジェクトの選択画面が表示されます。
![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/4000dcd8-c9e5-0a2a-aade-fdcca3745c7e.png)

![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/48b65eec-6673-30bf-35f4-440e1574ed22.png)

新規プロジェクトを作成するには、[新しいプロジェクト]ボタンをクリックします。
![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/16ceaf3d-813e-3c65-ebc6-aeb9d79b67ad.png)

新規プロジェクト作成画面が表示されます。
プロジェクト名の欄に任意の名前を入力し、[作成]ボタンをクリックします。
![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/c62dc918-24c9-1a9e-e851-7ff214e80f1b.png)


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


## 2-3. プロジェクト選択
作成したプロジェクトを選択します。

再び、画面左上の[プロジェクトの選択]ボタンをクリックします。
![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/9086a1b9-c5cc-5fdd-3b32-ede037912af2.png)


プロジェクト選択画面が表示されるので、先ほど作成したプロジェクトを選択し、[開く]ボタンをクリックします。
![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/2a51c401-9106-0b18-d8d9-8f0242782e35.png)

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

## 2-4. APIの有効化
選択したプロジェクト内で、APIを有効化します。

画面左メニューから、[APIとサービス]にカーソルを合わせ、さらに、[ライブラリ]をクリックします。
![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/5b627bef-6814-5097-5107-179aca71d816.png)

APIライブラリが表示されます。
![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/3079ec08-2a6e-f15b-8cda-d812ac866248.png)

"Maps JavaScript API"を検索し、クリックします。
![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/74e2b84e-55de-de68-55d9-c1a81ab13ab2.png)

Maps JavaScript APIの概要画面が表示されます。
[有効にする]ボタンをクリックし、APIを有効化します。
![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/bccb0d5d-b982-b1df-ccd4-baec37c347fe.png)

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

## 2-5. APIキー取得
APIの有効化が完了すると、プロジェクトの[APIとサービス]の[ダッシュボード]に、有効化したAPIが追加されます。
![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/c1065531-61de-37ef-bdd2-4717a05a20ee.png)

![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/d37da432-93de-a36e-7cb0-578c35fc7938.png)

ダッシュボードに表示されたAPI一覧から、"Maps JavaScript API"をクリックすると、次のような画面が表示されます。
![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/c68313f5-f7a5-0089-f2d2-4ed7349a842d.png)

[認証情報]タブをクリックします。
画面が表示されると、認証情報作成のウィンドウが開きます。
![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/969231e8-f803-5ce8-7e04-a76a38212697.png)

[認証情報を作成]ボタンをクリックし、さらに[APIキー]ボタンをクリックします。
![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/869470f5-9fed-b207-62e3-2bb40aa03a57.png)


Maps JavaScript APIのAPIキーが作成されました。
ウィンドウにて、取得したAPIキーを確認することができます。
[キーを制限]ボタンをクリックし、次の設定に進みます。
![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/30e6c3fc-4594-8559-32dc-925bb77a82e0.png)

APIキーの制限設定画面が表示されます。
ここでは、そのままの設定で[保存]ボタンをクリックします。
![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/fa68022f-1add-0f2f-7a8d-a329b82cbe80.png)

Maps JavaScript APIの[認証情報]タブに、取得したAPIキー情報が表示されます。
![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/4c68e084-f9c5-0b3b-31cb-d0922eafedaa.png)

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

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

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

```map.html
<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>Sample_GoogleMap</title>

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

<style>
html { height: 100% }
body { height: 100% }
#map { height: 100%; width: 100%}
</style>
</head>

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

<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>

</body>
</html>
```

## 3.2 画面

ブラウザで確認すると、下図のような画面が表示されます。
![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/6f9a6b84-ef7e-ce87-9a8a-de42dc3fa697.png)

## 3.3 解説
サンプルコード（map.html）の中身を解説します。

### ・ APIロード
Maps JavaScript APIをロードするため、以下のように記述します。
{APIキー}の部分には、先ほど取得したAPIキーを入れてください。
languageは、日本語（ja)を指定します。

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

### ・ style属性 指定
style属性にて、HTMLのスタイルを指定します。

ここでは、ウィンドウの高さ(height)を100%に設定しています。
さらに、マップ(id:map)のスタイルを、高さ(height)100%、幅(width)100%に設定します。

```map.html
<style>
html { height: 100% }
body { height: 100% }
#map { height: 100%; width: 100%}
</style>
```
### ・ マップ表示
divにて、マップ(id:map)をブラウザ画面上に配置します。

```map.html
<div id="map"></div>
```

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

```map.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に入力しています。

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

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

```js
var Options = {
 zoom: 15,      //地図の縮尺値
 center: MyLatLng,    //地図の中心座標
 mapTypeId: 'roadmap'   //地図の種類
};
```
ここでは、zoom、center、mapTypeidの３項目について設定をしています。
center項目については、先ほど座標指定にて取得した座標情報(変数：MyLatLng)を指定しています。

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

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

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

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

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

# 4. おわりに
今回は、Google Maps APIを用いて、ブラウザにマップを表示させる方法を紹介しました。

2018年6月から、APIキーの取得が必須になり、Google Maps APIは大幅な刷新が行われました。
注意しておきたいのが、新しい料金体系では、毎月200ドル分は無料で使用することが可能ですが、それを超えると利用料金を支払う必要があります。

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



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

# 参考情報
公式ホームページ
https://developers.google.com/maps/?hl=ja

Google Maps Platform ドキュメント - Maps JavaScript API
https://developers.google.com/maps/documentation/javascript/tutorial?hl=ja