Skip to content

Latest commit

 

History

History
81 lines (50 loc) · 5.23 KB

streetview.md

File metadata and controls

81 lines (50 loc) · 5.23 KB
Raw

Titanium 5.2.0: Google Street View Panorama

The ti.map 2.3.6 module that comes with Titanium 5.2.0 adds support for Google StreetViewPanorama. This allows you to integrate Street View in your Titanium Android apps.

In this blog post I'll walk you through all of this using the new Titanium 5.2.0 Sample App:

Sample App

Yes, that's our San Jose HQ you're looking at!

Add the Maps Module

Since the module is bundled with the Titanium SDK you don't need to download it. You do need to add it to your tiapp.xml:

<modules>
	<module platform="android">ti.map</module>
</modules>

In Studio you can use the TiApp Editor:

Installing a module

Initialize the Maps Module

Google requires you to request an API key that is linked to your App ID and the keystore you use when you build the app. You need to then add this API key to your tiapp.xml as well:

<android xmlns:android="http://schemas.android.com/apk/res/android">
	<manifest>
		<application>
			<meta-data android:name="com.google.android.maps.v2.API_KEY" android:value="AIzaSyB1ATGRrby9stkKxvdl3SBYxSVB5Kkm7yM"/>
		</application>
	</manifest>
</android>

The Sample App has an API key configured that is valid for its App ID and our builtin development keystore.

Add the StreetViewPanorama

To add the new StreetViewPanorama we have used Alloy's module attribute in the streetview.xml view:

<StreetViewPanorama module="ti.map" id="streetView" />

You should know that Alloy normally transpiles <Foo> elements to Ti.UI.createFoo(). You can use the ns attribute to let Alloy using something else then Ti.UI, which is what we needed for Live Photos. The module attribute is very similar but its value will be wrapped in require(..). This means we can load any native or CommonJS module to deliver us the view factory method(s) we need.

Configure the StreetViewPanorama

The API reference for the StreetViewPanorama is currently missing. Luckily there's just a few properties and the samples shows you all of them.

Set the location

First of all we need to set the position. We use the ID we've assigned the tag in the above XML view to set the position in streetview.tss:

'#streetView': {
	position: {
		latitude: 37.3676332,
		longitude: -121.9139205
	}
}

NOTE: Strange enough the Android API does not allow you set the heading. It seems always start headed North.

Customize the user-controlled functionality

There are a few features you can disable. All of them are on by default. In the Sample App I have overlaid some buttons so you can easily toggle these boolean properties.

  • panning: Determines whether the user will be able to re-orient the camera by dragging.
  • userNavigation: Determines whether the user will be able to move to a different panorama. Users can use a single tap on navigation links, or double tap the view, to move to a new panorama.
  • zoom: Determines whether the user will be able to pinch to zoom.
  • streetNames: Determines whether the user is able to see street names displayed on the ground.

Run on Android Device or Emulator

To use Google Maps the device or emulator needs to have Google Play Services installed. This comes - and is silently updated - with the Google Play app that you will find on pretty much any Android device.

Unfortunately, the popular Genymotion emulator comes without Google Apps because of a legal dispute with Google. You can find instructions on how to add Google Apps to Genymotion emulators on Google.

However, you might also consider giving the stock AVDs (Android Virtual Device) another try. Most of them include Google APIs, the performance has improved a lot recently and Android Studio makes it very easy to manage AVDs for tons of common devices:

AVD

And yes, these AVDs work fine with Titanium!

Code Strong! 🚀