To use the Google Maps SDK on any platform, API keys associated with an account with billing enabled are required. These can be obtained from the Google Cloud Console. This is required for all three platforms, Android, iOS, and Javascript. Additional information about obtaining these API keys can be found in the Google Maps documentation for each platform.
The Google Maps SDK supports the use of showing the users current location via enableCurrentLocation(bool). To use this, Apple requires privacy descriptions to be specified in Info.plist:
The Google Maps SDK currently does not support running on simulators using the new M1-based Macbooks. This is a known and acknowledged issue and requires a fix from Google. If you are developing on a M1 Macbook, building and running on physical devices is still supported and is the recommended approach.
The Google Maps Capacitor plugin ships with a web component that must be used to render the map in your application as it enables us to embed the native view more effectively on iOS. The plugin will automatically register this web component for use in your application.
For Angular users, you will get an error warning that this web component is unknown to the Angular compiler. This is resolved by modifying the module that declares your component to allow for custom web components.
On Android, the map is rendered beneath the entire webview, and uses this component to manage its positioning during scrolling events. This means that as the developer, you must ensure that the webview is transparent all the way through the layers to the very bottom. In a typically Ionic application, that means setting transparency on elements such as IonContent and the root HTML tag to ensure that it can be seen. If you can't see your map on Android, this should be the first thing you check.
On iOS, we render the map directly into the webview and so the same transparency effects are not required. We are investigating alternate methods for Android still and hope to resolve this better in a future update.
The Google Map element itself comes unstyled, so you should style it to fit within the layout of your page structure. Because we're rendering a view into this slot, by itself the element has no width or height, so be sure to set those explicitly.
Next, we should create the map reference. This is done by importing the GoogleMap class from the Capacitor plugin and calling the create method, and passing in the required parameters.
import{ GoogleMap }from'@capacitor/google-maps'; const apiKey ='YOUR_API_KEY_HERE'; const mapRef = document.getElementById('map'); const newMap =await GoogleMap.create({ id:'my-map',// Unique identifier for this map instance element: mapRef,// reference to the capacitor-google-map element apiKey: apiKey,// Your Google Maps API Key config:{ center:{ // The initial position to be rendered by the map lat:33.6, lng:-117.9, }, zoom:8,// The initial zoom level to be rendered by the map }, });
At this point, your map should be created within your application. Using the returned reference to the map, you can easily interact with your map in a number of way, a few of which are shown here.
<capacitor-google-mapid="map"></capacitor-google-map> <buttononclick="createMap()">Create Map</button> <style> capacitor-google-map{ display: inline-block; width:275px; height:400px; } </style> <script> import{GoogleMap}from'@capacitor/google-maps'; constcreateMap=async()=>{ const mapRef =document.getElementById('map'); const newMap =awaitGoogleMap.create({ id:'my-map',// Unique identifier for this map instance element: mapRef,// reference to the capacitor-google-map element apiKey:'YOUR_API_KEY_HERE',// Your Google Maps API Key config:{ center:{ // The initial position to be rendered by the map lat:33.6, lng:-117.9, }, zoom:8,// The initial zoom level to be rendered by the map }, }); }; </script>