4

I am using new Google map v2 module for showing maps in my android application. I am doing following steps. Application install and work fine. The issue i am facing is there is no map inside the view.

1) First i have downloaded map module and put into the below folder. 

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

2) Add map module in tiapp.xml file.

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

3) Add 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 Titamium sdk version.

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

5) Copy below code from titanium documentation and put 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 have created new keystore file and using this keystore file for creating distribution build.

7) For creating google maps API Keys, I have copy SHA1 certificate fingerprints;com.mycompanyname.myprojectname in console.

Application installed successfully in my Samsung S3 device. When i run the app, then it is showing map view with +,- button for zoom. The only issue is there is no map inside map view.

furqan kamani
  • 721
  • 2
  • 7
  • 16

3 Answers3

2

Check your Studio console when compiled on mobile, and look for:

[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 the dev_keystore.

That's works for me.

psyzinho
  • 71
  • 3
  • i have created google map key using studio dev_keystore SHA1 certificate fingerprint, but still facing same issues. Map is still not showing inside map view. Do i need to enable anything in the device settings? – furqan kamani Apr 09 '13 at 21:50
  • I found solution here. http://stackoverflow.com/questions/13803833/map-api-v2-authorisation-failure/13805807#13805807 – furqan kamani Apr 09 '13 at 22:17
0

I have noticed a very similar issue. In my app I use a view manager that loads content offscreen and then animates the View onscreen by setting the left property. The only way I can get the map to appear is if I also include changing the opacity in the animation call. I created a small Alloy app to illustrate.

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 opacity from the animate call the map shows up blank just as you described.

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

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

user2093568
  • 58
  • 5
  • I have Change mapview opacity to 1, but it is still not showing map inside map view. Did you enable anything in the device setting? – furqan kamani Apr 09 '13 at 22:05
  • I found solution here. http://stackoverflow.com/questions/13803833/map-api-v2-authorisation-failure/13805807#13805807 – furqan kamani Apr 09 '13 at 22:17
0

I had the same problem on my Galaxy s3. Solution for me was that I moved the map module to my project ( modules/android/ti.map/2.1.2 ) and my AndroidManifest.xml was making me trouble, when I removed it it works perfect, with it I had the same problem as you did.

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

Predrag Ristic
  • 1
  • 1