Hi,
I’d like to create a PWA with Ionic4 that shows a Google Map and interacts with it, choosing and adding pin, designing areas, and so on.
Which is the recommended library to do this?
Is it possible to use the standard Google Map Api with all its features inside an Ionic app?
Thank you very much
claudio
ioclaudio, it is. I recommend reading Josh Morony’s tutorial on Google Maps and Ionic 4. It’s very helpful with the CSS especially. I rewrote his and made my own component that can plug and play anywhere in an app. I can open source it for you if you want.
But! They have an issue right now with iOS… you can’t run it on there and it broke all my iOS user’s maps. So I migrated over to Apple MapKit JS. It’s sooo much nicer to work with. I can open source that too. I built it in such a way I can swap out my Google Map Component to my Apple Map one and only have to change a few fields on my pins (I tried to make it none… but callouts were different enough I had to change that and disabling scroll when you don’t want a user to scroll a map on an iOS device).
@Diesel555 thank you for your answer.
Meantime I’ve seen that the most used approaches are:
@ionici-native/google-maps
Maps JavaScript API
We have to build an app that has to heavily interact with a map so I think it is better to use the second solution to have the complete control of the map and to have all the features available.
You say that Ionic4 has some problems with Google Map on iOS, this could be a great problem.
We use hybrid frameworks because with them we develop an app usable on both Android and iOS, and now we have to use two different Maps APIs for Android and iOS?
So I’m starting to doubt that Ionic4 is a framework ready to develop a complex app that should be in production within a few months.
cld
For the javascript way, I suggest:
To have a look to https://leafletjs.com never used it but looks really interesting
Otherwise you could implement by yourself the Google Maps Api JS, it works well too
Ultimately, if you wish, you could have a look to my web component which is a wrapper “around” the google maps api. Note: I don’t plan to add extra features than these which are supported https://web-component-maps.com or https://github.com/fluster/web-google-maps
There is also a map wrapper for Angular, https://github.com/SebastianM/angular-google-maps, I used to use it but to be honest I dropped it for my web components as it didn’t support SSR for a while but now I think it’s fixed
(edit) Also the Cordova plugin, if you use it for iOS or Android, also support the “Browser”. I have no experience using plugins for the web, so can’t tell how it works
P.S.: I understand that we are speaking only on PWA and NOT native/cordova, therefore the question of using the cordova plugin to use the native map in order to not get billed doesn’t apply as javascript is needed
The @ionic-native would work. The issue is not Ionic’s. Google is aware of it. There is nothing Ionic could do, they reject apps with a prefix of ‘capacitor://’ which was a feature of their old map system that I wasn’t even registered on. They are implementing a fix and a bug report is out. Anyone trying to access google maps API from a Capacitor native app will not work (at least last week).
I don’t use two different Map APIs. I use Apple MapKit JS for both now. Ionic is ready for production. They have a few bugs (I still have one open for the keyboard covering an input on iOS)… but it’s better than doing Native on both (and man I hate the constraint system for iOS layout).
It will be an app for Android and iOS, some features will be available also using a web browser.
cld
It seems that it uses Open Street Maps and not Google Map.
Good to know, thx for the feedback
Maybe then using the cordova plugin for both native and web is the way?
In one of my app I use the javascript map for both native and web aka no cordova plugin, but I’m aware that might lead to cost
But In this way, using the Javascript API, you should have access to all the functionalities of Google Map. I don’t know if other libraries give you the same power. However, I’m doing some tests and I’ll keep you informed about the results
cld
Sure ping me, would be cool to know which solution you would finally implement, have fun 
Do you mean this tutorial?
It seems to be for Ionic2 and Ionic3 not for Ionic 4.
It’s mostly the same. He has a tutorial in his book which is Ionic 4. I use so much of his stuff I just bought his book. It was great for getting going, though a little pricy.
I could also just open source my component. I have two components, an Apple Map one and a Google Maps one which can be dropped anywhere, have pins thrown at it, etc. Be advised, google maps may drop support for Capacitor’s URI schema.
Why should I care about Capacitor?
I’d like to import the Google Api and to use directly it from the Ionic app.
cld
Capacitor allows you to access the Native UI and is the future with Ionic (Since it’s developed by them). So you can stick with Cordova or go to Capacitor. Either way, I assume you are using one of them to talk to a phone. If you’re not, you don’t care. Capacitor uses a local URL schema that isn’t supported by Google Maps, which creates the issue. The difference is not importing the Google API and using it directly, it’s how that API is called from your app (does it do https://… or something different). I have opened a bug report for Capacitor for this.
Thank you.
However at the end I’m using the Google Maps Javascript API without other plugin.
At the moment I don’t have to report any major problems.