Mapview showing only grid but no map in Titanium's Appcelerator

Question

I am developing a map based application using Titanium's Appcelerator. The problem which I am facing is that, when I am emulating the application on an Android device, I can see the grid of the mapview, but no map is being displayed. I have put the "ti.android.google.map.api.key" in the "tiapp.xml" file and all the android manifest specific permissions are also set. My source code is:

tiapp.xml:

<android xmlns:android="http://schemas.android.com/apk/res/android">
<tool-api-level>8</tool-api-level>
<manifest android:installLocation="preferExternal">
  <uses-sdk android:minSdkVersion="7" />
   <uses-library android:name="com.google.android.maps"/>
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_GPS"/>
<uses-permission android:name="android.permission.ACCESS_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_ASSISTED_GPS"/>
</manifest>
</android>
<mobileweb>
 <precache/>
  <splash>
        <enabled>true</enabled>
        <inline-css-images>true</inline-css-images>
    </splash>
    <theme>default</theme>
</mobileweb>
<modules>
<module platform="commonjs" version="2.2.0">ti.cloud</module>
</modules>
<property name="ti.android.google.map.api.key">my api key</property>
</ti:app>

Below is "app.js" for creating the GUI

app.js:

var win = Ti.UI.createWindow();
var mapview = Titanium.Map.createView({
mapType: Titanium.Map.STANDARD_TYPE,
region: {latitude:37.389569, longitude:-122.050212,
        latitudeDelta:0.1, longitudeDelta:0.1},
animate:true,
regionFit:true,
userLocation:false
});
win.add(mapview);
win.open();

Answer 1

First, you Check you Android Emulator/Device is connected with InterNet Connection or not.

If, Internet is working then it is run properly.

for more details and Information or (Demo Code) see this. tiapp.xml

<?xml version="1.0" encoding="UTF-8"?>
<ti:app xmlns:ti="http://ti.appcelerator.org">
    <deployment-targets>
        <target device="mobileweb">false</target>
        <target device="iphone">false</target>
        <target device="ipad">false</target>
        <target device="android">true</target>
        <target device="blackberry">false</target>
    </deployment-targets>
    <id>com.maps</id>
    <name>maps</name>
    <version>1.0</version>
    <publisher>tlukasavage</publisher>
    <url></url>
    <description>not specified</description>
    <copyright>2011 by tlukasavage</copyright>
    <icon>appicon.png</icon>
    <persistent-wifi>false</persistent-wifi>
    <prerendered-icon>false</prerendered-icon>
    <statusbar-style>default</statusbar-style>
    <statusbar-hidden>false</statusbar-hidden>
    <fullscreen>false</fullscreen>
    <navbar-hidden>false</navbar-hidden>
    <analytics>true</analytics>
    <guid>YOUR_GUID</guid>
    <iphone>
        <orientations device="iphone">
            <orientation>Ti.UI.PORTRAIT</orientation>
        </orientations>
        <orientations device="ipad">
            <orientation>Ti.UI.PORTRAIT</orientation>
            <orientation>Ti.UI.UPSIDE_PORTRAIT</orientation>
            <orientation>Ti.UI.LANDSCAPE_LEFT</orientation>
            <orientation>Ti.UI.LANDSCAPE_RIGHT</orientation>
        </orientations>
    </iphone>
    <android xmlns:android="http://schemas.android.com/apk/res/android"/>
    <modules/>

    <!-- Here's where we add the API key -->
    <property name="ti.android.google.map.api.key">YOUR_ANDROID_MAPS_API_KEY</property>
</ti:app>

app.js

var win = Ti.UI.createWindow();

var annotations = [
    Ti.Map.createAnnotation({
        latitude: 37.389569,
        longitude: -122.050212,
        title: 'Appcelerator HQ',
        subtitle: 'Mountain View, CA',
        animate: true,
        pincolor: Ti.Map.ANNOTATION_GREEN,
        leftButton: 'appcelerator.gif'
    }),
    Ti.Map.createAnnotation({
        latitude: 37.331689,
        longitude: -122.030731,
        title: 'Apple HQ',
        subtitle: 'Cupertino, CA',
        animate: true,
        pincolor: Ti.Map.ANNOTATION_RED,
        rightButton: 'apple.png'
    }),
    Ti.Map.createAnnotation({
        latitude: 37.422502,
        longitude: -122.0855498,
        title: 'Google HQ',
        subtitle: 'Mountain View, CA',
        animate: true,
        image: 'google.png',
        leftView: Ti.UI.createButton({
            title: 'leftView',
            height: 32,
            width: 70
        }),
        rightView: Ti.UI.createLabel({
            text: 'rightView',
            height: 'auto',
            width: 'auto',
            color: '#fff'
        })
    })
];
var mapview = Titanium.Map.createView({
    mapType: Titanium.Map.STANDARD_TYPE,
    region: {
        latitude:37.389569,
        longitude:-122.050212,
        latitudeDelta:.05,
        longitudeDelta:.05
    },
    animate:true,
    regionFit:true,
    userLocation:false,
    annotations: annotations
});
mapview.addRoute({
    name: 'myroute',
    width: 4,
    color: '#f00',
    points: [
        {latitude:37.422502, longitude:-122.0855498},
        {latitude:37.389569, longitude:-122.050212},
        {latitude:37.331689, longitude:-122.030731}
    ]
});
win.add(mapview);
win.open();

Try this, this is truly helpful for you... Cheers..