Google Maps & Geolocation

Search…

Using Google Maps in an Ionic 5 app

This feature is only available in the PRO version.
We will use the Google Maps Javascript SDK to embed a map in our app.
First of all, you need to get an API_KEY. It's super simple to do it, just follow the steps from the link. Make sure to enable the Maps JavaScript API.‌
Once you have your KEY, go to the index.html file and at the end you will see the following script. You need to replace YOUR_GOOGLE_MAPS_KEY with your own KEY.
index.html
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_KEY"></script> 
You need to install @types/googlemaps. This package contains type definitions for Google Maps JavaScript API.
npm install @types/googlemaps
GoogleMapComponent
We created a GoogleMapComponent that you can find in src/app/components/google-map/google-map.component.ts that will do the magic for you.‌
This component has the map and the logic to init the map. So, from the page you want to show you map you will add a reference to it:
@ViewChild(GoogleMapComponent) _GoogleMap: GoogleMapComponent;
Geolocation
‌For this feature we use the Capacitor Geolocation plugin to get the current position of the device and then we show a marker in the map.
trying to get the current location
display a marker in the map
Known issues
If you experience this error @types/googlemaps/index.d.ts is not a module then do the following.
1.npm install @types/googlemaps --save-dev
2.add "types": ["googlemaps"] in tsconfig.app.json file  in compilerOptions.
3.remove import {} from 'googlemaps'; from your code.

Push Notifications

Ionic Video Playlist

Last modified 2yr ago

Copy link

Outline

GoogleMapComponent

Geolocation

Known issues