[*Cordova*] GoogleMapの利用 - チュートリアルの動作まで（Android）

# はじめに
[mapsplugin/cordova-plugin-googlemaps](https://github.com/mapsplugin/cordova-plugin-googlemaps)を使用して、地図を表示するチュートリアル「[Tutorial for Mac](https://github.com/mapsplugin/cordova-plugin-googlemaps/wiki/Tutorial-for-Mac)」を動かすまでの手順メモ。

# 環境
* MacBook Air（OS X EL Capitan 10.11.3）
* エミュレータ: Genymotion(Nexus5 4.4.4 API19）

# 手順
## 事前要件の確認
以下を実行して、それぞれ存在するか調べる。
無いものがあったらインストールしたり、設定を追加したりする。

```bash
$ which ant
$ which android
$ which git
$ which unzip
$ echo $JAVA_HOME
$ cordova -v
```

以下を実行するとAndroid　SDK Managerが起動する。

```bash
$ android
```

現状以下のようになっている。
Extrasの4つはチュートリアルとちょっと違うけどこれを入れたら動いた。

![スクリーンショット 2016-03-23 9.30.40.png](https://qiita-image-store.s3.amazonaws.com/0/48912/31cb1ea5-b527-aea8-4172-6116306e6eef.png)
![スクリーンショット 2016-03-23 9.46.27.png](https://qiita-image-store.s3.amazonaws.com/0/48912/d02b9e50-7744-1d55-e041-2bf5655f2975.png)
![スクリーンショット 2016-03-23 9.31.39.png](https://qiita-image-store.s3.amazonaws.com/0/48912/f40ad3f1-e0a0-dd1c-2d33-79760f9e22f8.png)

## プロジェクトの作成
```bash
$ cordova create [プロジェクト名]
$ cordova platform add android
```

## APIキーの取得
1. [Google Developers Console](https://console.developers.google.com/project)でプロジェクトを作成。
2. 「Google APIを利用する」をクリックし、「Google Maps Android API」を有効にする。
3. 「認証情報」に進み、認証情報（APIキー）を作成する。その際選択するのは「Androidキー」。
4. 以下のコマンドを実行する際に3のキーを使用。

```bash
$ cordova plugin add https://github.com/phonegap-googlemaps-plugin/cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="APIキー"
```

## プロジェクトの編集


```js:index.js
var map;
document.addEventListener("deviceready", function() {
  var div = document.getElementById("map_canvas");

  // Initialize the map view
  map = plugin.google.maps.Map.getMap(div);

  // Wait until the map is ready status.
  map.addEventListener(plugin.google.maps.event.MAP_READY, onMapReady);
}, false);

function onMapReady() {
  var button = document.getElementById("button");
  button.addEventListener("click", onBtnClicked, false);
}

function onBtnClicked() {
  map.showDialog();
}
```

```html:index.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script type="text/javascript" src="cordova.js"></script>
    <script src="js/index.js"></script>
    <title>Hello World</title>
  </head>
  <body>
    <h3>PhoneGap-GoogleMaps-Plugin</h3>
    <div style="width:100%;height:400px" id="map_canvas"></div>
    <button id="button">Full Screen</button>
  </body>
</html>
```

## 実行
エミュレーターはGenymotionを使用。

```bash
$ cordova run android
```

以下のように怒られる。

```
HelloCordova won't run without Google Play services, which are missing from your phone.
```

このままじゃだめらしい…
![スクリーンショット 2016-03-23 10.12.46.png](https://qiita-image-store.s3.amazonaws.com/0/48912/8d7953d4-2516-caf4-29b6-ded9c14b1922.png)

## Genymotionの設定
1. [Genymotion-ARM-Translation_v1.1](http://filetrip.net/dl?4SUOrdcMRv)をダウンロード。
2. [[GUIDE] Genymotion | Installing ARM Translation and GApps[Updated Nov.16]](http://forum.xda-developers.com/showthread.php?t=2528952)から「Google Apps for Android 4.4」をダウンロード。これは使う端末のAndroidバージョンによって変える。
3. ダウンロードした1と2をGenymotionの端末起動後にドラッグしてインストールする。
4. 端末再起動。
5. `$ cordova run android`で実行。
6. 以下のように進んでいく。

「Update」をクリック。
![スクリーンショット 2016-03-23 11.13.29.png](https://qiita-image-store.s3.amazonaws.com/0/48912/e296105f-b0ce-a6e0-6ffb-5f32f3272178.png)

Googleアカウントがある場合は「Existing」をクリックしてその先入力する。
![スクリーンショット 2016-03-23 11.09.46.png](https://qiita-image-store.s3.amazonaws.com/0/48912/31b170d8-a650-2a8c-d022-49d94eeac6ad.png)

最終的にはこんな画面が出る。
![スクリーンショット 2016-03-23 11.15.55.png](https://qiita-image-store.s3.amazonaws.com/0/48912/5cb3a668-daef-c27d-c31a-8d01c1d1828f.png)

## 再度実行

```bash
$ cordova run android
```

今度は無事地図が表示された。
![スクリーンショット 2016-03-23 11.18.58.png](https://qiita-image-store.s3.amazonaws.com/0/48912/7ecc59a1-0780-b7fb-3844-e50b27408d1d.png)

# 参考
* [How do you install Google frameworks (Play, Accounts, etc.) on a Genymotion virtual device?](http://stackoverflow.com/questions/17831990/how-do-you-install-google-frameworks-play-accounts-etc-on-a-genymotion-virt)
* [[GUIDE] Genymotion | Installing ARM Translation and GApps[Updated Nov.16]](http://forum.xda-developers.com/showthread.php?t=2528952)
* [Genymotion の仮想端末に Google Play を入れる(2015/10時点)](http://qiita.com/snaka/items/9e770f2b8be2a6b2e662)
* [GenymotionにGoogle Playストアをインストールする方法。](http://androidlover.net/genymotion-install-google-play)