Ionic5 Google Maps with Capacitor

Ionic Framework
1

I am upgrading our app to Ionic5 and Google Maps is a key component.
In Ionic5 manner I tried to stick with Capacitor as it it recommended. However,
running Google Maps in the labs / simulator I get in the browser console:

[GoogleMaps]You need to execute "$> ionic cordova run browser"."$> ionic serve" is not supported.

Dependency as in the package.json

"@ionic-native/google-maps": "^5.0.0-beta.27",

It suggests to fall back to cordova. I thought capacitor was the future and I should stay away from Cordova? Or is a hybrid cordova & capacitor mode possible? If so, how?

2

the Angular/components package has a google-maps module that I’ve had success with. It works directly in angular
Angular/components Google Maps

3

Thanks! Is this an official package that is used over various projects? First time I see this implementation.
I’m curious since this is not linked against in the official ionic docs.

I’m set on building a robust update and careful to not add not 100% supported packages.

4

It is part of @angular/components which is not a default angular package, but it is the official repo for
the Material Design package if I’m not mistaken

5

How do I install the dependencies and set the API key in ionic for this?
The example is for an pure angular app, without the ionic framework on top.

" * Load the Google Maps JavaScript API."

Thank you so much for your suggestion, I will try it. Looks promising.

6

I think the Google maps docs has instructions on how to acquire an API key through the cloud console

I typically add the API key to the environments files and access it from there, and then in the root file of the app (src/index.html), add the script as per the Google maps docs documentation. It also appears you can add it dynamically but I have not tried it that way.

Then the Google maps package should be able to implemented following the readme

7

Do you add a local copy of the google maps lib or do you pull it remotely?

8

Once you have the API key and the script loaded you should just be able to run

npm i @angular/google-maps

Then import the module and follow the docs

10

I now finally got my implementation to work with the pure Google Maps JS API that I load from the web. Found this to be the simplest solution…

11

Hi!

You can post an example of how to use google maps with ionic 5 and capacitor.

I am trying to implement but I have not succeeded

Please

12

I am using google maps on ionic 5 but what i did was used Google maps javascript api and it worked. I used capacitor for geolocation tho and it comes together nicely

1 Like
13

I’ve used this and it works fine: https://www.npmjs.com/package/@agm/core

14

AGM/core did not work for me…

15

@elduderino15

@ionic-native/google-maps and cordova-plugin-googlemaps work on Capacitor Android, however they do not work on Capacitor iOS, due to the technical problem of Capacitor iOS.

In order to work on iOS, I have to work for the plugin lots of time.
Please support the fundraising.

2 Likes
16

It did not work for me either, it does not even log what the issue is. It just doesn’t show on the UI.

17

But how to restrict javascript map to android application.
We can restrict API key from the website but it can not be restricted from native android application