Appcelerator Blog

The Leading Resource for All Things Mobile

Titanium 5.2.0: Google Maps StreetView Panorama

3 Flares 3 Flares ×

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! 🚀

3 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 3 Email -- 3 Flares ×

6 Comments

  1. Rainer Schleevoigt

    Need short hint how with classic version.

    • In Alloy <StreetViewPanorama module="ti.map" id="streetView" /> simply compiles to require('ti.map').createStreetViewPanorama(); so you can use that in classic.

  2. Rainer Schleevoigt

    I think the pano uses the same ggoogle api key (has the same name {com.google.android.maps.v2.API_KEY})

    This code

    ~~~
    var position = {
    latitude : _e.annotation.latitude,
    longitude : _e.annotation.longitude
    };
    console.log(position);
    var pano = TiMap.createStreetViewPanorama({
    position : position,
    panning : true,
    userNavigation : true,
    zoom : true,
    streetNames : true
    });
    win.add(pano);
    ~~~

    This comes on console:

    I/Google Maps Android API: Google Play services package version: 8703438

    RESULT: black (empty) screen, the position is OK. Nothing on adb logcat. Maps works with this key

  3. Muhammad Ahmed Fahad

    Hello,

    With this module,how can I detect if Street view is available in a particular location. Right now, for e.g. if I have a map view and the user focusses on a particular position and I try to open street view for it then it just shows a black screen. What’s even more weird is that we have a map view on the same window which to becomes black for no reason when a position on the Street view is set to a lat long where street view is not available.

    $.streetView.setPosition({
    latitude : e.latitude,
    longitude : e.longitude
    });

    • Unfortunately Google doesn’t expose an API or event to determine if a panorama was found for the position. However, there are some improvements/workarounds we could add and I’ve created MOD-2245 to investigate these. Thanks for the heads up!

Comments are closed.

Sign up for updates!

Become a mobile leader. Take the first step to scale mobile innovation throughout your enterprise.
Get in touch
computer and tablet showing Appcelerator software
Start free, grow from there.
3 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 3 Email -- 3 Flares ×