Google Maps Mobile SDKをApache Cordova(PhoneGap)で表示する:iOS編
HTML5を使ってモバイル・アプリを作れるPhoneGapのオープンソース版「Apache Cordova」を使って、Google Mapsを表示するプラグインを紹介します。
phonegap-googlemaps-plugin
https://github.com/wf9a5m75/phonegap-googlemaps-plugin/
SDKを使用して表示するので、ネイティブアプリと同じようにサクサク地図が表示されます。
今回はiOSアプリを作成する方法を紹介します。
1. Apache Cordovaのインストール
- Node.jsをインストール
-
npm -g install cordova
でApache Cordovaをインストール
-
Apache Antもインストール
-
XCodeもインストール
2. Cordovaプロジェクトの作成
$> cordova create HelloMap com.example.myapp HelloMap
npm -g install cordova
でApache Cordovaをインストール$> cordova create HelloMap com.example.myapp HelloMap
と実行すると、HelloMapディレクトリが作成されます。
3. プラットフォームの追加
$> cd HelloMap/
$> cordova platform add ios
$> cd HelloMap/
$> cordova platform add ios
HelloMap/platforms/以下に、iosのプロジェクトが作成されます。
4. APIキーを取得する
続いて、Google APIs Console をブラウザで開きます。
登録しているプロジェクトがない場合は、適当に登録します。
APIs & auth > APIsを開き、Google Maps SDK for iOS
をOnにします。
続いてCredentials
を開き、アプリの名前空間を登録します。
APIキーが作成されるので、これをメモしておきます。
5. プラグインのインストール
Cordovaプロジェクトのディレクトリに戻ります。
$> cd HelloMap/
続いて、プラグインをインストールします。
$> cordova plugin add plugin.google.maps --variable API_KEY_FOR_IOS=(取得したAPIキー)
インストールはこれでOKです。
6. コードの作成
ここからは楽しいコーディングです。
HelloMap/www/index.htmlをテキストエディタで編集します。
まず試しに以下のHTMLをコピペしてください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
var map;
document.addEventListener("deviceready", function() {
var button = document.getElementById("button");
button.addEventListener("click", onBtnClicked, false);
var div = document.getElementById("map_canvas");
map = plugin.google.maps.Map.getMap(div);
}, false);
function onBtnClicked() {
map.showDialog();
}
</script>
</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>
7. 実行
シミュレータで実行するには、Node.jsのシミュレータ用モジュールをインストールしてください。
$> npm -g install ios-sim
実機で実行するには、ios-deploy
もインストールします。
$> npm -g install ios-deploy
実行するのは次のコマンドです。
$> cordova emulate ios
あとは以下のコマンドを実行するだけで、勝手にインストールされるはずです。
$> cordova run ios
こんな感じになるはずです。
Author And Source
この問題について(Google Maps Mobile SDKをApache Cordova(PhoneGap)で表示する:iOS編), 我々は、より多くの情報をここで見つけました https://qiita.com/wf9a5m75/items/863287cc99e4622052ca著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .