How to use Ionic Google Maps without Cordova?

lceconi · October 6, 2018, 9:59pm

I am building a PWA with Ionic, so I don’t need Cordova. Following the instructions to use the Ionic Google Maps for Ionic v4 it says to add a Cordova plugin, with the API keys. Source https://github.com/mapsplugin/ionic-googlemaps-quickdemo-v4

Questions:

Is it possible to use @ionic-native/google-maps@5.0.xxx-beta without Cordova?
Where should I set the API Key?

Thanks

danieldugger · October 7, 2018, 1:30am

I used this website for my integration: https://www.joshmorony.com/ionic-2-how-to-use-google-maps-geolocation-video-tutorial/

wf9a5m75 · October 7, 2018, 5:15am

This demo is built with cordova browser platform. So cordova is required.

Here is steps that how to build this project for PWA.

$> git clone https://github.com/mapsplugin/ionic-googlemaps-quickdemo-v4

$> vim package.json  // then replace `(YOUR_API_KEY)` with your key
https://github.com/mapsplugin/ionic-googlemaps-quickdemo-v4/blob/master/package.json#L83-L84

$> vim config.xml  //  then replace `(YOUR_API_KEY)` with your key

$> npm i

$> ionic cordova prepare

$> npm run buildwww
https://github.com/mapsplugin/ionic-googlemaps-quickdemo-v4/blob/master/package.json#L13

lceconi · October 7, 2018, 4:39pm

Oh, ok then. I thought that if I was build a PWA I shouldn’t use Cordova at all. But if there’s the option to build Cordova for browser, it seems about right. Thanks for your attention!

robinyo · October 8, 2018, 11:20pm

You have a few options, for example:

JeongJun · June 8, 2019, 4:37am

After buidlwww, can I deploy all files in doc directory to Firebase for hosting?

wf9a5m75 · June 8, 2019, 6:12am

github.com

mapsplugin/ionic-googlemaps-quickdemo-v4/blob/master/package.json#L13


"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"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 '(YOUR_API_KEY_IS_HERE)' ./docs/ | xargs sed -i '' 's/(YOUR_API_KEY_IS_HERE)/AIzaSyBZamoub9SCWL2GriEBRSgLGVVrF0QPakk/g'",
  "link": "bash bin/local_dev.sh"
},
"private": true,
"dependencies": {
  "@angular/common": "^7.2.2",
  "@angular/core": "^7.2.2",
  "@angular/forms": "^7.2.2",
  "@angular/http": "^7.2.2",
  "@angular/platform-browser": "^7.2.2",
  "@angular/platform-browser-dynamic": "^7.2.2",

JeongJun · June 11, 2019, 7:58pm

Very Thanks. It works!!! But it’s not easy to develop for browser platform because there is not any support for live-reload. I found your suggestion at https://github.com/mapsplugin/cordova-plugin-googlemaps#browser-platform . But the plugin, cordova-plugin-browsersync doesn’t look like working any more.

ipsjolly · June 21, 2019, 7:37am

In Ionic 4 you can opt for JavaScript Google Maps check this tutorial on same