Skip to content

Instantly share code, notes, and snippets.

@wf9a5m75

wf9a5m75/file0.txt

Created March 17, 2014 17:42
Show Gist options
  • Save wf9a5m75/9604390 to your computer and use it in GitHub Desktop.
Save wf9a5m75/9604390 to your computer and use it in GitHub Desktop.
Download ZIP
Google Maps Mobile SDKをApache Cordova(PhoneGap)で表示する:iOS編 ref: http://qiita.com/wf9a5m75/items/863287cc99e4622052ca
Raw
file0.txt
$> cordova create HelloMap com.example.myapp HelloMap
Raw
file1.txt
$> cd HelloMap/
$> cordova platform add ios
Raw
file10.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
$> cd HelloMap/
Raw
file3.txt
$> cordova plugin add plugin.google.maps --variable API_KEY_FOR_IOS=(取得した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=11111 --variable API_KEY_FOR_IOS=(取得した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
$> npm -g install ios-sim
Raw
file6.txt
$> npm -g install ios-deploy
Raw
file7.txt
$> cordova emulate ios
Raw
file8.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
file8.txt
$> cordova run ios
Raw
file9.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
file9.txt
$> cordova run ios
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment