A Titanium module wraps GoogleMaps SDK for iOS.
-
Getting an API key for GoogleMaps SDK
Google APIs ConsoleからAPI keyを取得して、プロジェクトで利用しているAppID(bundle identifier)を登録します。
Get API key from Google APIs Console, and register the AppID(bundle identifier) using in your project. -
Download the GoogleMaps SDK
SDKをダウンロードして、好きな場所におきます。中には、
GoogleMaps.framework
が含まれており、これがビルド時に必要です。
Download the SDK, and put it in an arbitrary directory.GoogleMaps.framework
, which is included in the SDK files, is needed on building your project. -
Setup the module
このモジュール
jp.daisaru11.dev.tigmap-iphone-0.1.zip
をプロジェクトのルートディレクトリに置きます。tiapp.xml
にこのモジュールの設定を追記します。
Putjp.daisaru11.dev.tigmap-iphone-0.1.zip
in the root directory of your project, and edittiapp.xml
:<modules> … <module platform="iphone" version="0.1">jp.daisaru11.dev.tigmap</module> </modules>
module.xcconfig
をコピーしてプロジェクトのルートディレクトリに置きます。module.xcconfig
の中に書かれているOTHER_LDFLAGS
を編集してframeworkの場所を指定します。たぶん、モジュールのビルド時のオプションを指定するファイルです。
Copymodule.xcconfig
to the root directory of your project. EditOTHER_LDFLAGS
option to specify the directory including the framework:OTHER_LDFLAGS=$(inherited) -F"/Users/daichi/Frameworks/GoogleMaps-iOS-1.1.0" -framework GoogleMaps ...
SDKに含まれている
GoogleMaps.bundle
をプロジェクト内のResources
ディレクトリの下にコピーします。
CopyGoogleMaps.bundle
intoResources
directory of your project.GoogleMaps.bundle
is located inGoogleMaps.framework/Resources/
.あとは通常通り、ビルドするだけです。ビルドに失敗する場合は
build/
以下を削除して再ビルドすると成功する場合もあります。
Build and run your project. -
How to use
モジュールを
require
でロードし、Mapを表示する前にAPIKeyをセットします。
Load the module byrequire
, set your APIKey before displaying a map view:var tigmap = require('jp.daisaru11.dev.tigmap'); tigmap.setAPIKey('YOUR APIKEY HERE');
通常のViewのように他のViewやWindowにaddすることで表示します。
Add a map view to other views or windows to display it.var mapView = tigmap.createGMapView({ location: { latitude: 35.681382, longitude: 139.766084 }, zoom: 6 }); win.add(mapView);
-
create and show a MapView
MapViewを生成する際には
location
、zoom
、bearing
、viewingAngle
といったプロパティを指定できます。詳しくはSDKのドキュメントをみてください。通常のビューのようにtop
やwidth
といったプロパティも設定できます。
MapView is created with the following properties:location
,zoom
,bearing
,viewingAngle
. See the SDK Documents for the detail.var mapView = tigmap.createGMapView({ location: { latitude: 35.681382, longitude: 139.766084 }, zoom: 6, bearing: 90, viewingAngle: 30, width: 320, height: 100 });
-
change camera position
mapView.setLocation({ latitude: 34.693738, longitude: 135.502165 }); mapView.setZoom(12); mapView.setBearing(180); mapView.setViewingAngle(45);
-
change maptypes
var mapView = tigmap.createGMapView({ location: { latitude: 35.681382, longitude: 139.766084 }, zoom: 6, mapType: tigmap.NORMAL_TYPE }); mapView.setMapType(tigmap.SATELLITE_TYPE); mapView.setMapType(tigmap.TERRAIN_TYPE); mapView.setMapType(tigmap.HYBRID_TYPE);
-
add and remove annotations(markers)
var ann = tigmap.createGMapAnnotation({ latitude: 34.693738, longitude: 135.502165, title: 'hoge' }); mapView.addAnnotation(ann); mapView.removeAnnotation(ann);
-
listen events
mapView.addEventListener('click', function(e) { Ti.API.info('map clicked - latitude:'+e.latitude+', longitude:'+e.longitude); }); mapView.addEventListener('longpress', function(e) { Ti.API.info('map long pressed - latitude:'+e.latitude+', longitude:'+e.longitude); }); mapView.addEventListener('changeCameraPosition', function(e) { Ti.API.info('camera position changed - latitude:'+e.target.latitude+', longitude:'+e.target.longitude); }); ann.addEventListener('click', function(e) { Ti.API.info('marker click - latitude:'+ann.latitude+', longitude:'+ann.longitude); }); ann.addEventListener('infoWindowClick', function(e) { Ti.API.info('infowindow click'); });
author: Daichi Sakai
license: MIT License
Sorry for my poor English.