CODEWITHSUNDEEP
buildsencha-touch-2
Andriy Kuzmych
Andriy Kuzmych

Reputation: 193

Build error for app using Google Maps API

I have an issue building my sencha touch 2 app for production, using this command: "sencha app build production". I see following issue:

C:\xampp\htdocs\eiamobile\eiamobile\i>sencha app build production
[INFO] Deploying your application to C:\xampp\htdocs\eiamobile\eiamobile\i\build\production
[INFO] Copied sdk/sencha-touch.js
[INFO] Copied app.js
[ERROR] UNKNOWN, unknown error 'C:\xampp\htdocs\eiamobile\eiamobile\i\build\production\http:'

I see the ONLY if I use external JS (google geometry) file in app.json file:

  "js": [
    {
        "path": "sdk/sencha-touch.js"
    },
    {
        "path": "app.js",
        "bundle": true,  /* Indicates that all class dependencies are concatenated into this file when build */
        "update": "delta"
    },
    {
        "path": "http://maps.google.com/maps/api/js?sensor=false&v=3&libraries=geometry",
        "bundle": true,  /* Indicates that all class dependencies are concatenated into this file when build */
        "update": "delta"
    }

]

ANY help will be appreciated

EDIT:

Adding my index.html file

 <html manifest="" lang="en-US">
 <head>
 <meta charset="UTF-8">
 <title>eia-sencha</title>
 <style type="text/css">
     /**
     * Example of an initial loading indicator.
     * It is recommended to keep this as minimal as possible to provide instant feedback
     * while other resources are still being loaded for the first time
     */
    html, body {
        height: 100%;
        background-color: #1985D0
    }

    #appLoadingIndicator {
        position: absolute;
        top: 50%;
        margin-top: -15px;
        text-align: center;
        width: 100%;
        height: 30px;
        -webkit-animation-name: appLoadingIndicator;
        -webkit-animation-duration: 0.5s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: linear;
    }

    #appLoadingIndicator > * {
        background-color: #FFFFFF;
        display: inline-block;
        height: 30px;
        -webkit-border-radius: 15px;
        margin: 0 5px;
        width: 30px;
        opacity: 0.8;
    }

    @-webkit-keyframes appLoadingIndicator{
        0% {
            opacity: 0.8
        }
        50% {
            opacity: 0
        }
        100% {
            opacity: 0.8
        }
    }
 </style>
 <!-- The line below must be kept intact for Sencha Command to build your application -->
<script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&v=3&libraries=geometry"></script>

 </head>
 <body>
   <div id="appLoadingIndicator">
    <div></div>
    <div></div>
    <div></div>
   </div>
 </body>
 </html>

Upvotes: 3

Views: 2198

Answers (2)

Titouan de Bailleul
Titouan de Bailleul

Reputation: 12949

From Sencha Touch documentation

To use this component you must include an additional JavaScript file from Google:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

So, I guess you could try to load the API this way, which is actually how they do it in the map example that comes with the framework.

Also if google is undefined when your app starts, I guess you can load GM API asynchronously :

http://www.senchafiddle.com/#MhAME

Hope this helps

Upvotes: 2

Oleg Dats
Oleg Dats

Reputation: 4133

Try to add "remote": true in app.json

http://mitchellsimoens.com/2012/07/sencha-touch-2/going-remote-with-sencha-command/

Upvotes: 2

Related Questions