Ionic-v4 Goggle map is not working

Te google map I cloned from (@wf9a5m75) a GitHub repository is not working. I followed the step, but still not working. This is the URL I cloned it from I did npm install, ionic cordova add platform, and ionic Cordova prepare. it is still not working but showing blank whenever I output it in my desktop browser and Android phone. I am using ionic v4 - beta. Thanks for your help.
{ "name": "ionic-googlemaps-quickdemo-v4", "version": "0.0.1", "author": "Ionic Framework", "homepage": "", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "buildwww": "rm -rf www/ docs/; ionic cordova build browser --prod; cp src/404.html www/; cp platforms/browser/config.xml www/; mv www docs; grep -rl '(api)' ./docs/ | xargs sed -i '' 's/(api)/AIzaSyBZamoub9SCWL2GriEBRSgLGVVrF0QPakk/g'", "link": "bash bin/" }, "private": true, "dependencies": { "@angular/common": "6.0.9", "@angular/core": "6.0.9", "@angular/forms": "6.0.9", "@angular/http": "6.0.9", "@angular/platform-browser": "6.0.9", "@angular/platform-browser-dynamic": "6.0.9", "@angular/router": "6.0.9", "@ionic-native/core": "^5.0.0-beta.21", "@ionic-native/google-maps": "^5.0.0-beta.23", "@ionic-native/splash-screen": "5.0.0-beta.14", "@ionic-native/status-bar": "5.0.0-beta.14", "@ionic/angular": "4.0.0-beta.0", "@ionic/ng-toolkit": "1.0.0", "@ionic/schematics-angular": "1.0.1", "cordova-android": "7.1.1", "cordova-browser": "^5.0.4", "cordova-plugin-device": "^2.0.2", "cordova-plugin-googlemaps": "^2.4.6", "cordova-plugin-ionic-keyboard": "^2.1.2", "cordova-plugin-ionic-webview": "^2.0.2", "cordova-plugin-splashscreen": "^5.0.2", "cordova-plugin-statusbar": "^2.4.2", "cordova-plugin-whitelist": "^1.3.3", "core-js": "^2.5.3", "minimist": "^1.2.0", "rxjs": "^6.2.2", "rxjs-compat": "^6.2.2", "xml2js": "^0.4.19", "zone.js": "^0.8.26" }, "devDependencies": { "@angular-devkit/architect": "^0.7.0-rc.1", "@angular-devkit/build-angular": "0.7.0-rc.3", "@angular-devkit/core": "0.7.0-rc.3", "@angular-devkit/schematics": "0.7.0-rc.3", "@angular/cli": "6.0.8", "@angular/compiler": "6.0.9", "@angular/compiler-cli": "6.0.9", "@angular/language-service": "6.0.9", "@ionic/lab": "1.0.8", "@types/jasmine": "~2.8.6", "@types/jasminewd2": "~2.0.3", "@types/node": "~10.5.2", "codelyzer": "~4.4.2", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~2.0.2", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.0", "karma-jasmine": "~1.1.1", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.4.0", "ts-node": "~7.0.0", "tslint": "~5.11.0", "typescript": "~2.7.2" }, "description": "An Ionic project", "cordova": { "plugins": { "cordova-plugin-whitelist": {}, "cordova-plugin-device": {}, "cordova-plugin-splashscreen": {}, "cordova-plugin-ionic-webview": {}, "cordova-plugin-ionic-keyboard": {}, "cordova-plugin-statusbar": {}, "cordova-plugin-googlemaps": { "API_KEY_FOR_ANDROID": "(myapi)", "API_KEY_FOR_IOS": "(myapi)", "LOCATION_WHEN_IN_USE_DESCRIPTION": "This app wants to get your location while this app runs only.", "LOCATION_ALWAYS_USAGE_DESCRIPTION": "This app wants to get your location always, even this app runs in background." } }, "platforms": [ "browser" ] } }

You need to install cordova-plugin-googlemaps also.


have u specify the #class for the map ?

  • html :

  • ts :
    GoogleMaps.create('map_canvas', mapOptions);

cause i know it’s not specified on this github page

Thanks @wf9a5m75 for apt response. I did install it. it is now working on mobile device but not on desktop browser. what could possibly caused that?

Thanks @dfertane. it has been included. it is now working on android device, but not on desktop browser

ionic cordova run browser

Thanks @wf9a5m75. it worked!

What is the api key in package.json? i already tried to put browser and server key still not able to display the map…this one for browser