Google map module v2. Android app does not display map inside map

Question

I am using the new Google map v2 module to display maps in an Android application. I am doing the following steps. The application installs and works fine. The problem I am facing is the lack of a map inside the view.

1) First, I downloaded the card module and placed it in the following folder.

/Users/fkamani/Library/Application\ Support/Titanium/modules/android/ 

2) Add the map module to the tiapp.xml file.

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

3) Add the following android manifest in tiapp.xml

 <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"/> <!-- Replace com.domain.appid with your application ID --> <uses-permission android:name="com.mycompanyname.myprojectname.permission.MAPS_RECEIVE"/> <permission android:name="com.mycompanyname.myprojectname.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="My App key"/> </application> </manifest> </android> 

4) change the version of Titamium sdk.

 <sdk-version>3.0.2.GA</sdk-version> 

5) Copy the code below from the documentation for titanium and place it in the app.js file

 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, myid:1 // Custom property to uniquely identify this annotation. }); 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); // Handle click events on any annotations on this map. mapview.addEventListener('click', function(evt) { Ti.API.info("Annotation " + evt.title + " clicked, id: " + evt.annotation.myid); }); win.open(); 

6) I created a new keystore file and used this keystore file to create a distribution assembly.

7) To create the Google Maps APIs, I have a copy of the SHA1 certificate, com.mycompanyname.myprojectname in the console.

The application was successfully installed on my Samsung S3 device. When I launch the application, it displays a map with the +, - button to enlarge it. The only problem is the lack of displaying the map inside the map.

Answer 1

Check the Studio console when compiling on your mobile device and find:

 [DEBUG] jarsigner -sigalg MD5withRSA -digestalg SHA1 -storepass ******* -keystore "YOUR_PATH_TO_KEYSTORE" -signedjar 

If the keystore is located in "... / mobilesdk / OSX / 3.0.2.GA / Android / dev_keystore" you need to create a Google Maps API key with the SHA1 certificate of dev_keystore.

This works for me.

Answer 2

I noticed a very similar problem. In my application, I use the view manager, which loads the content off-screen and then animates the screen on the screen, setting the left property. The only way I can display the map is to also enable the opacity change in the animation call. For illustration, I created a small application "Alloy".

index.js

 function doClick(e) { $.mapView.animate({left:0, opacity:1}) } var map1 = MapModule.createView({ userLocation: true, mapType: MapModule.NORMAL_TYPE, animate: true, region: {latitude: -33.87365, longitude: 151.20689, latitudeDelta: 0.1, longitudeDelta: 0.1 }, height: '100%', top: 0, left: 0, width: '100%' }); $.mapView.add(map1); $.win.open(); 

index.xml

 <Alloy> <Window class="container" id="win"> <Label onClick="doClick" height="100">Click HERE</Label> <View id="mapView"> </View> </Window> </Alloy> 

index.tss

 ".container": { backgroundColor:"white" }, "#mapView": { top:0, bottom:0, opacity:1, width:Ti.Platform.displayCaps.platformWidth, left:Ti.Platform.displayCaps.platformWidth } 

If you remove the opacity from an animated call, the map appears blank exactly as described.

 function doClick(e) { $.mapView.animate({left:0}) } 

His dirty trick that seems to work for me, although I would be very interested to know why changing the opacity in an animated call (just adding $ .mapView.opacity = 1; doesn't work) makes the map displayable ...

Answer 3

I had the same problem on my Galaxy s3. The solution for me was that I moved the map module to my project (modules / android / ti.map / 2.1.2), and my AndroidManifest.xml caused me problems, when I deleted it, it works fine, it works fine with it I had the same as you did.

Hope this helps. Also, a really good video where the guy actually shows the full setup (thanks to him LOT!), Can be seen here: http://www.youtube.com/watch?v=M4fUlqKWg7g