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.

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.