Map not showing up

[hdxsfbr]

I just got a fresh install of ionic and I tried this starter template but I cannot see a map on chrome or safari after doing: ionic serve

I don't see any errors on the browser console but here is the console output of the app creation, etc:

~/d/p/ionicplay $ ionic start myApp maps Creating Ionic app in folder /Users/andrebatista/dev/projects/ionicplay/myApp based on maps project

Downloading: https://github.com/driftyco/ionic-app-base/archive/master.zip [=============================] 100% 0.0s

Downloading: https://github.com/driftyco/ionic-starter-maps/archive/master.zip

Update config.xml Initializing cordova project Fetching plugin "org.apache.cordova.device" via plugin registry Fetching plugin "org.apache.cordova.console" via plugin registry Fetching plugin "com.ionic.keyboard" via plugin registry

Your Ionic project is ready to go! Some quick tips:

• cd into your project: $ cd myApp
• Setup this project to use Sass: ionic setup sass
• Develop in the browser with live reload: ionic serve
• Add a platform (ios or Android): ionic platform add ios [android] Note: iOS development requires OS X currently See the Android Platform Guide for full Android installation instructions: https://cordova.apache.org/docs/en/edge/guide_platforms_android_index.md.html
• Build your app: ionic build
• Simulate your app: ionic emulate
• Run your app on a device: ionic run
• Package an app using Ionic package service: ionic package

For more help use ionic --help or visit the Ionic docs: http://ionicframework.com/docs

+---------------------------------------------------------+

• New Ionic Updates for February 2015 +
• The View App just landed. Preview your apps on any device
• http://view.ionic.io +
• Add ngCordova to your project for easy device API access
• bower install ngCordova +
• Generate splash screens and icons with ionic resource
• http://ionicframework.com/blog/automating-icons-and-splash-screens/ + +---------------------------------------------------------+ ~/d/p/ionicplay $ cd myApp/ ~/d/p/i/myApp $ ionic setup sass npmnpm WARN package.json myapp@1.0.0 No README data

node-sass@0.9.6 install /Users/andrebatista/dev/projects/ionicplay/myApp/node_modules/gulp-sass/node_modules/node-sass node build.js

child_process: customFds option is deprecated, use stdio instead. child_process: customFds option is deprecated, use stdio instead. CXX(target) Release/obj.target/binding/binding.o CXX(target) Release/obj.target/binding/sass_context_wrapper.o CXX(target) Release/obj.target/binding/libsass/ast.o CXX(target) Release/obj.target/binding/libsass/base64vlq.o CXX(target) Release/obj.target/binding/libsass/bind.o CXX(target) Release/obj.target/binding/libsass/constants.o CXX(target) Release/obj.target/binding/libsass/context.o CXX(target) Release/obj.target/binding/libsass/contextualize.o CXX(target) Release/obj.target/binding/libsass/copy_c_str.o CXX(target) Release/obj.target/binding/libsass/error_handling.o CXX(target) Release/obj.target/binding/libsass/eval.o CXX(target) Release/obj.target/binding/libsass/expand.o CXX(target) Release/obj.target/binding/libsass/extend.o CXX(target) Release/obj.target/binding/libsass/file.o CXX(target) Release/obj.target/binding/libsass/functions.o CXX(target) Release/obj.target/binding/libsass/inspect.o CXX(target) Release/obj.target/binding/libsass/output_compressed.o CXX(target) Release/obj.target/binding/libsass/output_nested.o CXX(target) Release/obj.target/binding/libsass/parser.o CXX(target) Release/obj.target/binding/libsass/prelexer.o CXX(target) Release/obj.target/binding/libsass/sass.o CXX(target) Release/obj.target/binding/libsass/sass_interface.o CXX(target) Release/obj.target/binding/libsass/source_map.o CXX(target) Release/obj.target/binding/libsass/to_c.o CXX(target) Release/obj.target/binding/libsass/to_string.o CXX(target) Release/obj.target/binding/libsass/units.o CXX(target) Release/obj.target/binding/libsass/utf8_string.o CXX(target) Release/obj.target/binding/libsass/util.o CXX(target) Release/obj.target/binding/libsass/sass2scss/sass2scss.o SOLINK_MODULE(target) Release/binding.node SOLINK_MODULE(target) Release/binding.node: Finished Installed in /Users/andrebatista/dev/projects/ionicplay/myApp/node_modules/gulp-sass/node_modules/node-sass/bin/darwin-x64-v8-3.28/binding.node gulp-rename@1.2.0 node_modules/gulp-rename

shelljs@0.3.0 node_modules/shelljs

gulp-util@2.2.20 node_modules/gulp-util ├── lodash._reinterpolate@2.4.1 ├── minimist@0.2.0 ├── vinyl@0.2.3 (clone-stats@0.0.1) ├── through2@0.5.1 (xtend@3.0.0, readable-stream@1.0.33) ├── chalk@0.5.1 (ansi-styles@1.1.0, supports-color@0.2.0, escape-string-regexp@1.0.3, has-ansi@0.1.0, strip-ansi@0.3.0) ├── lodash.template@2.4.1 (lodash._escapestringchar@2.4.1, lodash.values@2.4.1, lodash.templatesettings@2.4.1, lodash.defaults@2.4.1, lodash.keys@2.4.1, lodash.escape@2.4.1) ├── dateformat@1.0.11 (get-stdin@4.0.1, meow@3.0.0) └── multipipe@0.1.2 (duplexer2@0.0.2)

gulp-concat@2.5.2 node_modules/gulp-concat ├── through2@0.6.3 (xtend@4.0.0, readable-stream@1.0.33) ├── concat-with-sourcemaps@1.0.0 (source-map@0.1.43) └── gulp-util@3.0.3 (array-differ@1.0.0, object-assign@2.0.0, beeper@1.0.0, array-uniq@1.0.2, replace-ext@0.0.1, lodash.reinterpolate@3.0.1, lodash.reescape@3.0.1, lodash.reevaluate@3.0.1, minimist@1.1.0, chalk@0.5.1, vinyl@0.4.6, lodash.template@3.3.0, dateformat@1.0.11, multipipe@0.1.2)

gulp-minify-css@0.3.13 node_modules/gulp-minify-css ├── memory-cache@0.0.5 ├── through2@0.6.3 (xtend@4.0.0, readable-stream@1.0.33) ├── bufferstreams@0.0.2 (readable-stream@1.0.33) ├── vinyl-sourcemaps-apply@0.1.4 (source-map@0.1.43) ├── gulp-util@3.0.3 (array-differ@1.0.0, beeper@1.0.0, object-assign@2.0.0, array-uniq@1.0.2, replace-ext@0.0.1, lodash.reinterpolate@3.0.1, lodash.reescape@3.0.1, lodash.reevaluate@3.0.1, minimist@1.1.0, chalk@0.5.1, vinyl@0.4.6, lodash.template@3.3.0, dateformat@1.0.11, multipipe@0.1.2) └── clean-css@3.0.10 (commander@2.5.1, source-map@0.1.43)

gulp@3.8.11 node_modules/gulp ├── v8flags@2.0.2 ├── pretty-hrtime@0.2.2 ├── interpret@0.3.10 ├── deprecated@0.0.1 ├── archy@1.0.0 ├── tildify@1.0.0 (user-home@1.1.1) ├── minimist@1.1.0 ├── chalk@0.5.1 (ansi-styles@1.1.0, escape-string-regexp@1.0.3, supports-color@0.2.0, strip-ansi@0.3.0, has-ansi@0.1.0) ├── semver@4.3.0 ├── orchestrator@0.3.7 (stream-consume@0.1.0, sequencify@0.0.7, end-of-stream@0.1.5) ├── gulp-util@3.0.3 (array-differ@1.0.0, beeper@1.0.0, object-assign@2.0.0, array-uniq@1.0.2, replace-ext@0.0.1, lodash.reevaluate@3.0.1, lodash.reescape@3.0.1, lodash.reinterpolate@3.0.1, vinyl@0.4.6, lodash.template@3.3.0, through2@0.6.3, dateformat@1.0.11, multipipe@0.1.2) ├── liftoff@2.0.1 (extend@1.3.0, flagged-respawn@0.3.1, resolve@1.0.0, findup-sync@0.2.1) └── vinyl-fs@0.3.13 (graceful-fs@3.0.5, strip-bom@1.0.0, defaults@1.0.0, vinyl@0.4.6, mkdirp@0.5.0, through2@0.6.3, glob-stream@3.1.18, glob-watcher@0.0.6)

bower@1.3.12 node_modules/bower ├── is-root@1.0.0 ├── junk@1.0.0 ├── stringify-object@1.0.0 ├── which@1.0.8 ├── abbrev@1.0.5 ├── chmodr@0.1.0 ├── osenv@0.1.0 ├── archy@0.0.2 ├── opn@1.0.1 ├── rimraf@2.2.8 ├── bower-logger@0.2.2 ├── lru-cache@2.5.0 ├── bower-endpoint-parser@0.2.2 ├── graceful-fs@3.0.5 ├── lockfile@1.0.0 ├── nopt@3.0.1 ├── retry@0.6.0 ├── tmp@0.0.23 ├── chalk@0.5.0 (ansi-styles@1.1.0, escape-string-regexp@1.0.3, supports-color@0.2.0, has-ansi@0.1.0, strip-ansi@0.3.0) ├── q@1.0.1 ├── request-progress@0.3.0 (throttleit@0.0.2) ├── shell-quote@1.4.2 (array-filter@0.0.1, array-map@0.0.0, array-reduce@0.0.0, jsonify@0.0.0) ├── semver@2.3.2 ├── bower-json@0.4.0 (intersect@0.0.3, deep-extend@0.2.11, graceful-fs@2.0.3) ├── fstream@1.0.4 (inherits@2.0.1) ├── p-throttler@0.1.0 (q@0.9.7) ├── mkdirp@0.5.0 (minimist@0.0.8) ├── promptly@0.2.0 (read@1.0.5) ├── bower-config@0.5.2 (osenv@0.0.3, graceful-fs@2.0.3, optimist@0.6.1) ├── tar-fs@0.5.2 (pump@0.3.5, tar-stream@0.4.7) ├── fstream-ignore@1.0.2 (inherits@2.0.1, minimatch@2.0.1) ├── decompress-zip@0.0.8 (nopt@2.2.1, mkpath@0.1.0, touch@0.0.2, readable-stream@1.1.13, binary@0.3.0) ├── glob@4.0.6 (inherits@2.0.1, once@1.3.1, minimatch@1.0.0) ├── request@2.42.0 (caseless@0.6.0, json-stringify-safe@5.0.0, forever-agent@0.5.2, aws-sign2@0.5.0, stringstream@0.0.4, oauth-sign@0.4.0, tunnel-agent@0.4.0, qs@1.2.2, node-uuid@1.4.2, mime-types@1.0.2, bl@0.9.4, form-data@0.1.4, tough-cookie@0.12.1, http-signature@0.10.1, hawk@1.1.1) ├── bower-registry-client@0.2.3 (graceful-fs@2.0.3, request-replay@0.2.0, lru-cache@2.3.1, async@0.2.10, mkdirp@0.3.5, request@2.51.0) ├── cardinal@0.4.0 (redeyed@0.4.4) ├── mout@0.9.1 ├── update-notifier@0.2.0 (semver-diff@0.1.0, string-length@0.1.2, latest-version@0.2.0, configstore@0.3.2) ├── handlebars@2.0.0 (optimist@0.3.7, uglify-js@2.3.6) ├── inquirer@0.7.1 (figures@1.3.5, mute-stream@0.0.4, through@2.3.6, readline2@0.1.1, lodash@2.4.1, cli-color@0.3.2, rx@2.4.0) └── insight@0.4.3 (object-assign@1.0.0, chalk@0.5.1, async@0.9.0, lodash.debounce@2.4.1, os-name@1.0.3, tough-cookie@0.12.1, configstore@0.3.2, inquirer@0.6.0)

gulp-sass@0.7.3 node_modules/gulp-sass ├── map-stream@0.1.0 ├── gulp-util@3.0.3 (array-differ@1.0.0, beeper@1.0.0, object-assign@2.0.0, array-uniq@1.0.2, replace-ext@0.0.1, lodash.reinterpolate@3.0.1, lodash.reescape@3.0.1, lodash.reevaluate@3.0.1, minimist@1.1.0, chalk@0.5.1, vinyl@0.4.6, lodash.template@3.3.0, through2@0.6.3, dateformat@1.0.11, multipipe@0.1.2) └── node-sass@0.9.6 (get-stdin@3.0.2, object-assign@1.0.0, node-watch@0.3.4, node-sass-middleware@0.3.1, nan@1.3.0, yargs@1.3.3, mkdirp@0.5.0, chalk@0.5.1, mocha@1.21.5, sinon@1.10.3)

Successful npm install Updated /Users/andrebatista/dev/projects/ionicplay/myApp/www/index.html references to sass compiled css

Ionic project ready to use Sass!

• Customize the app using scss/ionic.app.scss
• Run ionic serve to start a local dev server and watch/compile Sass to CSS

[02:54:55] Using gulpfile ~/dev/projects/ionicplay/myApp/gulpfile.js [02:54:55] Starting 'sass'... [02:54:55] Finished 'sass' after 323 ms

Successful sass build ~/d/p/i/myApp $ ionic serve Gulp startup tasks: [ 'sass', 'watch' ] Running dev server: http://localhost:8100 Running live reload server: http://localhost:35729 Watching : [ 'www/*/', '!www/lib/*/' ] Ionic server commands, enter: restart or r to restart the client app from the root goto or g and a url to have the app navigate to the given url consolelogs or c to enable/disable console log output serverlogs or s to enable/disable server log output quit or q to shutdown the server and exit

[02:55:12] Using gulpfile ~/dev/projects/ionicplay/myApp/gulpfile.js [02:55:12] Starting 'sass'... [02:55:12] Starting 'watch'... [02:55:12] Finished 'watch' after 6.79 ms CSS changed: www/css/ionic.app.css [02:55:12] Finished 'sass' after 341 ms CSS changed: www/css/ionic.app.min.css

[hdxsfbr]

FWIW it only happens after ionic setup sass. If I start a new project and don't setup sass, the map shows up just fine...

[harryfk]

Same here. The map shows up perfectly without sass, but it has 0 width and height when using sass. Loading/initialization still happens correctly, but the dimensions of the map container are 0x0.

[anshulklr]

i'm unable to see the map on the android device? can someone help me in this problem

[VGerris]

I have the exact same issue: nothing visible on Android emulator or device, while it works on the ios emulator. Any hints?

[anshulklr]

@VGerris try giving the height and width to 100% maybe that will solve the problem

[VGerris]

Thank you for the answer. Based on the example, can you be more specific on the where and how? Isn't that done in the css file? Do you have a working example for Android? Greetings On 28 Apr 2015 12:08, "anshulklr" notifications@github.com wrote:

@VGerris https://github.com/VGerris try giving the height and width to 100% maybe that will solve the problem

— Reply to this email directly or view it on GitHub https://github.com/driftyco/ionic-starter-maps/issues/5#issuecomment-97000931 .

[anshulklr]

@VGerris if you used this code only ionic-starter-maps then its well defined. can you create a codepen so that i can look into the issue

[VGerris]

Hi,

I could,but I use the exact same code as this example. So just create a project and see. It runs on iOS not on Android emulator (mac) or device. Can you test that? So basically ionic start myApp maps. Then platform add android and ios and run.

Grettings On 28 Apr 2015 12:12, "anshulklr" notifications@github.com wrote:

@VGerris https://github.com/VGerris if you used this code only ionic-starter-maps then its well defined. can you create a codepen so that i can look into the issue

— Reply to this email directly or view it on GitHub https://github.com/driftyco/ionic-starter-maps/issues/5#issuecomment-97001631 .

[anshulklr]

@VGerris i used the same code for the android and it works well for me .

[VGerris]

Mmm, strange. I get a blank screen with a bar and a compass, no Google logo. Screenshot attached On 28 Apr 2015 12:18, "anshulklr" notifications@github.com wrote:

@VGerris https://github.com/VGerris i used the same code for the android and it works well for me .

— Reply to this email directly or view it on GitHub https://github.com/driftyco/ionic-starter-maps/issues/5#issuecomment-97002513 .

[anshulklr]

@VGerris i'm unable to see the image

[VGerris]

[VGerris]

I attached a screenshot @anshulklr

[anshulklr]

@VGerris can you create a codepen for this or try changing the code once again and using the ionic-starter-maps code I also stuck at this problem then i removed the code and once again did it using the above code. It worked , just give it a try and did you add the geolocation plugin?

[VGerris]

Hej @anshulklr, thanks for your help. At some point it started working when I added a maps key as a variable for another plugin. So I suppose it was something with that. Still, a simply copy of this does only work on iOS no clue why. Thanks!

[hy9be]

I have the same issue with @VGerris .

[VGerris]

I hope it is not with me but the same as I. Try to create a maps api key and add it for android

[hy9be]

I debugged it and found those base map http requests got 404 response.

I solved the issue by:

1. Add the whitelist plugin: cordova plugin add https://github.com/apache/cordova-plugin-whitelist.git
2. And update the config.xml with

<access origin="*"/>
<allow-intent href="*"/>
<allow-navigation href="*"/>

It looks sth blocked network requests.

[John-Rankin]

I also had this issue -- thanks hy9be