Google Maps & Geolocation
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
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;
.png?alt=media&token=4629bc5f-6e96-4f1f-9be1-2cd84a897d3e)
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.
%20(1).png?alt=media&token=4c219834-dcd4-45e9-af39-e79c3cda6a85)
trying to get the current location
%20(2).png?alt=media&token=dc58446e-be4b-4c5e-9c0c-ec9b57fbc0db)
display a marker in the map
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"]intsconfig.app.jsonfile incompilerOptions. - 3.remove
import {} from 'googlemaps';from your code.
Last modified 3yr ago