Skip to content

Instantly share code, notes, and snippets.

@wf9a5m75

wf9a5m75/file0.txt

Created March 15, 2014 01:47
Show Gist options
  • Save wf9a5m75/9560675 to your computer and use it in GitHub Desktop.
Save wf9a5m75/9560675 to your computer and use it in GitHub Desktop.
Download ZIP
Google Maps Mobile SDKをApache Cordova(PhoneGap)で表示する:Android編 ref: http://qiita.com/wf9a5m75/items/798b847dcd470f8afed9
Raw
file0.txt
$> cordova create HelloMap com.example.myapp HelloMap
Raw
file1.txt
$> cd HelloMap/
$> cordova platform add android
Raw
file10.txt
// OS X と Linux
$> keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android
// Windows
$> keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android
Raw
file11.txt
$> cd HelloMap/
Raw
file12.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", function() {
var button = document.getElementById("button");
button.addEventListener("click", onBtnClicked, false);
}, false);
function onBtnClicked() {
var map = plugin.google.maps.Map.getMap();
map.addEventListener(plugin.google.maps.event.MAP_READY, onMapInit);
}
function onMapInit(map) {
map.showDialog();
}
</script>
</head>
<body>
<button id="button">Init a map</button>
</body>
</html>
Raw
file12.txt
$> cordova plugin add ./phonegap-googlemaps-plugin/ --variable API_KEY_FOR_ANDROID=(取得したAPIキー) --variable API_KEY_FOR_IOS=11111
Raw
file13.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", function() {
var button = document.getElementById("button");
button.addEventListener("click", onBtnClicked, false);
}, false);
function onBtnClicked() {
var map = plugin.google.maps.Map.getMap();
map.addEventListener(plugin.google.maps.event.MAP_READY, onMapInit);
}
function onMapInit(map) {
map.showDialog();
}
</script>
</head>
<body>
<button id="button">Init a map</button>
</body>
</html>
Raw
file13.txt
$> cordova build android
Raw
file14.txt
$> cordova build android
Raw
file15.js
//位置の定義
var GOOGLE = new plugin.google.maps.LatLng(37.422858, -122.085065);
//地図を作成
var map = plugin.google.maps.Map.getMap();
//初期化が完了するのを待つ
map.addEventListener(plugin.google.maps.event.MAP_READY, function(map) {
// 初期化が完了したら、地図を表示する
map.showDialog();
// マーカを地図に追加
// 複数行のテキストでもOK
map.addMarker({
'position': GOOGLE,
'title': ["Hello Google Map", "for", "Cordova!"].join("\n"),
'snippet': "This plugin is awesome!"
}, function(marker) {
// カメラの位置をアニメーションで移動させます
map.animateCamera({
'target': GOOGLE,
'zoom': 15
}, function() {
//アニメーションが完了したら、情報ウィンドウを表示します
marker.showInfoWindow();
});
});
});
Raw
file15.txt
$> cordova run android
Raw
file16.js
//位置の定義
var GOOGLE = new plugin.google.maps.LatLng(37.422858, -122.085065);
//地図を作成
var map = plugin.google.maps.Map.getMap();
//初期化が完了するのを待つ
map.addEventListener(plugin.google.maps.event.MAP_READY, function(map) {
// 初期化が完了したら、地図を表示する
map.showDialog();
// マーカを地図に追加
// 複数行のテキストでもOK
map.addMarker({
'position': GOOGLE,
'title': ["Hello Google Map", "for", "Cordova!"].join("\n"),
'snippet': "This plugin is awesome!"
}, function(marker) {
// カメラの位置をアニメーションで移動させます
map.animateCamera({
'target': GOOGLE,
'zoom': 15
}, function() {
//アニメーションが完了したら、情報ウィンドウを表示します
marker.showInfoWindow();
});
});
});
Raw
file2.txt
// OS X と Linux
$> keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android
// Windows
$> keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android
Raw
file3.txt
$> cordova plugin add plugin.google.maps --variable API_KEY_FOR_ANDROID=(取得したAPIキー)
Raw
file4.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>
Raw
file4.txt
$> cordova plugin add ./phonegap-googlemaps-plugin/ --variable API_KEY_FOR_ANDROID=(取得したAPIキー)
Raw
file5.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", function() {
var button = document.getElementById("button");
button.addEventListener("click", onBtnClicked, false);
}, false);
function onBtnClicked() {
var map = plugin.google.maps.Map.getMap();
map.addEventListener(plugin.google.maps.event.MAP_READY, onMapInit);
}
function onMapInit(map) {
map.showDialog();
}
</script>
</head>
<body>
<button id="button">Init a map</button>
</body>
</html>
Raw
file5.txt
$> cordova run android
Raw
file6.js
//位置の定義
var GOOGLE = new plugin.google.maps.LatLng(37.422858, -122.085065);
//地図を作成
var map = plugin.google.maps.Map.getMap();
//初期化が完了するのを待つ
map.addEventListener(plugin.google.maps.event.MAP_READY, function(map) {
// 初期化が完了したら、地図を表示する
map.showDialog();
// マーカを地図に追加
// 複数行のテキストでもOK
map.addMarker({
'position': GOOGLE,
'title': ["Hello Google Map", "for", "Cordova!"].join("\n"),
'snippet': "This plugin is awesome!"
}, function(marker) {
// カメラの位置をアニメーションで移動させます
map.animateCamera({
'target': GOOGLE,
'zoom': 15
}, function() {
//アニメーションが完了したら、情報ウィンドウを表示します
marker.showInfoWindow();
});
});
});
Raw
file6.txt
$> cordova run android
Raw
file7.js
//位置の定義
var GOOGLE = new plugin.google.maps.LatLng(37.422858, -122.085065);
//地図を作成
var map = plugin.google.maps.Map.getMap();
//初期化が完了するのを待つ
map.addEventListener(plugin.google.maps.event.MAP_READY, function(map) {
// 初期化が完了したら、地図を表示する
map.showDialog();
// マーカを地図に追加
// 複数行のテキストでもOK
map.addMarker({
'position': GOOGLE,
'title': ["Hello Google Map", "for", "Cordova!"].join("\n"),
'snippet': "This plugin is awesome!"
}, function(marker) {
// カメラの位置をアニメーションで移動させます
map.animateCamera({
'target': GOOGLE,
'zoom': 15
}, function() {
//アニメーションが完了したら、情報ウィンドウを表示します
marker.showInfoWindow();
});
});
});
Raw
file7.txt
$> cd platforms/android/
Raw
file8.txt
$> android update project -p . -l ../../(android_sdk_path)/extras/google/google_play_services/libproject/google-play-services_lib
Raw
file9.txt
$ cat project.properties
# This file is automatically generated by Android Tools.
# Do not modify this file -- YOUR CHANGES WILL BE ERASED!
#
# This file must be checked in Version Control Systems.
#
# To customize properties used by the Ant build system edit
# "ant.properties", and override values to adapt the script to your
# project structure.
#
# To enable ProGuard to shrink and obfuscate your code, uncomment this (available properties: sdk.dir, user.home):
#proguard.config=${sdk.dir}/tools/proguard/proguard-android.txt:proguard-project.txt
android.library.reference.1=CordovaLib
# Project target.
target=android-19
android.library.reference.2=google-play-services_lib
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment