Google Maps V2 for Android using Appcelerator Titanium

Hello Everyone,

Here comes my another post on Titanium for Android’s Google Maps V2.  Google deprecates the V1 maps, if you already have a V1 MAP API key you still get a support using Ti.Map namespace on Titanium. Else you definitely need to use Google Maps V2. With this post you can able to see the Youtube video inorder to use the Maps V2 with titanium.

Prerequisites

  • Titanium SDK >= 3.0.2
  • Titanium’s Open source Map Module
  • Android device with Google play installed (you can’t test this in Android Emulator)
You don’t need the Titanium’s open source Map module if you are using the latest Titanium SDK, its already embedded with the SDK (like the Facebook Module).

The following is the sample Titanium code, to use the Maps V2

var MapModule = require(‘ti.map’);

var win = Titanium.UI.createWindow();
var mountainView = MapModule.createAnnotation({
    latitude:37.390749,
    longitude:-122.081651,
    title:"Appcelerator Headquarters",
    subtitle:'Mountain View, CA',
    pincolor:MapModule.ANNOTATION_RED
});
var mapview = MapModule.createView({
    mapType: MapModule.NORMAL_TYPE,
    region: {latitude:33.74511, longitude:-84.38993,
            latitudeDelta:0.01, longitudeDelta:0.01},
    animate:true,
    regionFit:true,
    userLocation:true,
    annotations:[mountainView]
});
win.add(mapview);
win.open();

 

By seeing the code you can able to notice that the Maps module uses the same methods and properties (more or less similar code) in Ti.Map namespace. Only thing you need to replace the usage of Ti.Map namespace to ti.map module.

 

Tiapp.xml changes
The following is the code content you need to add to the Tiapp.xml's Android part

<android xmlns:android="http://schemas.android.com/apk/res/android">
    <manifest>
        <!-- Allows the API to download data from Google Map servers -->
        <uses-permission android:name="android.permission.INTERNET"/>
        <!-- Allows the API to cache data -->
        <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
        <!-- Use GPS for device location -->
        <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
        <!-- Use Wi-Fi or mobile connection for device location -->
        <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
        <!-- Allows the API to access Google web-based services -->
        <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES"/>
        <!-- Specify OpenGL ES 2.0 as a requirement -->
        <uses-feature android:glEsVersion="0x00020000" android:required="true"/>
        <uses-permission android:name="com.test.v2.permission.MAPS_RECEIVE"/>
        <permission
            android:name="com.test.v2.permission.MAPS_RECEIVE" android:protectionLevel="signature"/>
        <application>
            <!-- Replace "PASTE YOUR GOOGLE MAPS API KEY HERE" with the Google API key you obtained -->
            <meta-data
                android:name="com.google.android.maps.v2.API_KEY" android:value="YOUR_MAP_API_KEY_HERE"/>
        </application>
    </manifest>
</android>

replace all com.test.v2 to your appid and add your API key on “YOUR_MAP_API_KEY_HERE” part. And that’s it, you’re done. Run your app on device to see the V2 maps.

Please keep in mind the appid provided in Tiapp.xml and Google API console should be same, else you are not able to the Map tiles.

Troubleshooting:
What I need to do if I’m seeing the Map an not the Map tiles?
  • Open the Google Api console and navigate to your project, then goto the services tab, and check the Android V2 map is ON
  • Goto API access tab, and check APP-ID you added on the API key’s is equal to APP-ID in Tiapp.xml file
  • In Tiapp.xml file the <uses-permission android:name=”com.your.appid.permission.MAPS_RECEIVE”/> tag and <permissio android:name=”com.your.appid.permission.MAPS_RECEIVE” android:protectionLevel=”signature”/> tag should have your app-id similar to the app-id you gave in Google API Console
  • Still facing the problems? post it in Titanium QA and link that thread here.
Hope this helps. Please let me know your feedback and comments.
Thank you.
  • Pingback: This Week in Titanium Mobile Development: 22 Jul 2013 | Titanium Development()

  • Vito Lipari

    I followed all the steps for maps in maniacal mode….
    But when a try to use maps my app crash!!!!

    • Can you please send me a sample code and Ti version details.. So, I can try to help you.. nagaharish.movva [at] gmail

      • Vito Lipari

        Hi and thank you so much for answer!

        For first, excuse me for my bad english! ( I’m Italian ).

        So, i follow all the steps, but when i open map window map doesn’t appear!!!

        This is the code i use:

        var map = Ti.UI.createWindow();
        var mapView = MapModule.createView({
        mapType: MapModule.TERRAIN_TYPE,
        region: {
        latitude:36.830260,
        longitude:11.942233,
        latitudeDelta:0.2,
        longitudeDelta:0.2
        },
        animate:true,
        regionFit:true,
        userLocation:true,
        annotations:[pin]
        });
        map.add(mapView);
        map.open();

        i sent you an email

  • Allen Oliver M Chun

    Hi Thanks for this great tutorial. I got this working with my Titanium android deployed on Jelly Bean. But when I tested it to deploy on Ice Cream Sandwich OS my app crashes. I just followed your code.

    • Please confirm again. Because it will work fine in Android 2.3 version also. And also make sure you sign up with gmail account in your android phone (Market place). I think we must login first.

  • Guest

    Hello there,
    I saw your video demo and implement all the same stuff into my app, app is running fine with the map but map pin is not showing, Can you please guide me how to do that?

    also, i need to achieve the following design for my app, Please help me if you know how to put text on map pin image.

    App design is here,

  • Hello All,

    I saw your video demo on youtube, also read your this tutorial and implement all the same stuff into my app, app is running fine with the map but map pin is not showing, Can you please guide me how to do that?

    also, i need to achieve the following design for my app, Please help me if you know how to put text on map pin image.

    App design is here,

    Thanks in advance.

  • hund

    Hi; can someone help me please. I do every step; and when I install the app, the map appears blank, but the zoom and user location works.
    Can someone please help me finding a solution to the blank map

  • Pingback: This Week in Titanium Mobile Development: 22 Jul 2013 | TiDev()