LoginSignup
5

More than 5 years have passed since last update.

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

Posted at

はじめに

mapsplugin/cordova-plugin-googlemapsを使用して、地図を表示するチュートリアル「Tutorial for Mac」を動かすまでの手順メモ。

環境

  • MacBook Air(OS X EL Capitan 10.11.3)
  • エミュレータ: Genymotion(Nexus5 4.4.4 API19)

手順

事前要件の確認

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

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

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

$ android

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

スクリーンショット 2016-03-23 9.30.40.png
スクリーンショット 2016-03-23 9.46.27.png
スクリーンショット 2016-03-23 9.31.39.png

プロジェクトの作成

$ cordova create [プロジェクト名]
$ cordova platform add android

APIキーの取得

  1. Google Developers Consoleでプロジェクトを作成。
  2. 「Google APIを利用する」をクリックし、「Google Maps Android API」を有効にする。
  3. 「認証情報」に進み、認証情報(APIキー)を作成する。その際選択するのは「Androidキー」。
  4. 以下のコマンドを実行する際に3のキーを使用。
$ cordova plugin add https://github.com/phonegap-googlemaps-plugin/cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="APIキー"

プロジェクトの編集

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();
}
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を使用。

$ cordova run android

以下のように怒られる。

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

このままじゃだめらしい…
スクリーンショット 2016-03-23 10.12.46.png

Genymotionの設定

  1. Genymotion-ARM-Translation_v1.1をダウンロード。
  2. [GUIDE] Genymotion | Installing ARM Translation and GApps[Updated Nov.16]から「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

Googleアカウントがある場合は「Existing」をクリックしてその先入力する。
スクリーンショット 2016-03-23 11.09.46.png

最終的にはこんな画面が出る。
スクリーンショット 2016-03-23 11.15.55.png

再度実行

$ cordova run android

今度は無事地図が表示された。
スクリーンショット 2016-03-23 11.18.58.png

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5