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 main Google Maps SDK now supports running on simulators on Apple Silicon Macs, however, a dependency from Google called Google-Maps-iOS-Utils does not yet support Apple Silicon. This is requires a new release of the library from Google. If you are developing on an Apple Silicon Mac, building and running on physical devices is still supported and is the recommended approach.
A workaround on Apple Silicon Macs if you want/need to use the simulator is adding the following line to your Podfile in the target 'App' section after the # Add your Pods here line:
pod 'Google-Maps-iOS-Utils', :git => 'https://github.com/googlemaps/google-maps-ios-utils.git', :commit => '637954e5bcb2a879c11a6f2cead153a6bad5339f'
This plugin will use the following project variables (defined in your app's variables.gradle file):
googleMapsPlayServicesVersion: version of com.google.android.gms:play-services-maps (default: 18.1.0)
googleMapsUtilsVersion: version of com.google.maps.android:android-maps-utils (default: 3.4.0)
googleMapsKtxVersion: version of com.google.maps.android:maps-ktx (default: 3.4.0)
googleMapsUtilsKtxVersion: version of com.google.maps.android:maps-utils-ktx (default: 3.4.0)
kotlinxCoroutinesVersion: version of org.jetbrains.kotlinx:kotlinx-coroutines-android and org.jetbrains.kotlinx:kotlinx-coroutines-core (default: 1.6.4)
androidxCoreKTXVersion: version of androidx.core:core-ktx (default: 1.10.0)
kotlin_version: version of org.jetbrains.kotlin:kotlin-stdlib (default: 1.8.20)
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>
The DOM element that the Google Map View will be mounted on which determines size and positioning.
forceCreate
boolean
Destroy and re-create the map instance if a map with the supplied id already exists
false
region
string
The region parameter alters your application to serve different map tiles or bias the application (such as biasing geocoding results towards the region). Only available for web.
language
string
The language parameter affects the names of controls, copyright notices, driving directions, and control labels, as well as the responses to service requests. Only available for web.
For web, all the javascript Google Maps options are available as
GoogleMapConfig extends google.maps.MapOptions.
For iOS and Android only the config options declared on GoogleMapConfig are available.
Prop
Type
Description
Default
Since
width
number
Override width for native map.
height
number
Override height for native map.
x
number
Override absolute x coordinate position for native map.
y
number
Override absolute y coordinate position for native map.
Default location on the Earth towards which the camera points.
zoom
number
Sets the zoom of the map.
androidLiteMode
boolean
Enables image-based lite mode on Android.
false
devicePixelRatio
number
Override pixel ratio for native map.
styles
MapTypeStyle[] | null
Styles to apply to each of the default map types. Note that for satellite, hybrid and terrain modes, these styles will only apply to labels and geometry.
Sets the opacity of the marker, between 0 (completely transparent) and 1 inclusive.
1
title
string
Title, a short description of the overlay.
snippet
string
Snippet text, shown beneath the title in the info window when selected.
isFlat
boolean
Controls whether this marker should be flat against the Earth's surface or a billboard facing the camera.
false
iconUrl
string
Path to a marker icon to render. It can be relative to the web app public directory, or a https url of a remote marker icon. SVGs are not supported on native platforms.
The position at which to anchor an image in correspondence to the location of the marker on the map. By default, the anchor is located along the center point of the bottom of the image.
4.2.0
tintColor
{ r: number; g: number; b: number; a: number; }
Customizes the color of the default marker image. Each value must be between 0 and 255. Only for iOS and Android.
4.2.0
draggable
boolean
Controls whether this marker can be dragged interactively
false
zIndex
number
Specifies the stack order of this marker, relative to other markers on the map. A marker with a high z-index is drawn on top of markers with lower z-indexes
For web, all the javascript Circle options are available as
Polygon extends google.maps.CircleOptions.
For iOS and Android only the config options declared on Circle are available.
Prop
Type
Description
fillColor
string
The fill color. All CSS3 colors are supported except for extended named colors.
fillOpacity
number
The fill opacity between 0.0 and 1.0.
strokeColor
string
The stroke color. All CSS3 colors are supported except for extended named colors.
strokeWeight
number
The stroke width in pixels.
geodesic
boolean
clickable
boolean
Indicates whether this <code>Circle</code> handles mouse events.
title
string
Title, a short description of the overlay. Some overlays, such as markers, will display the title on the map. The title is also the default accessibility text. Only available on iOS.
For web, all the javascript Polyline options are available as
Polyline extends google.maps.PolylineOptions.
For iOS and Android only the config options declared on Polyline are available.
Prop
Type
Description
strokeColor
string
The stroke color. All CSS3 colors are supported except for extended named colors.
strokeOpacity
number
The stroke opacity between 0.0 and 1.0.
strokeWeight
number
The stroke width in pixels.
geodesic
boolean
When <code>true</code>, edges of the polygon are interpreted as geodesic and will follow the curvature of the Earth. When <code>false</code>, edges of the polygon are rendered as straight lines in screen space. Note that the shape of a geodesic polygon may appear to change when dragged, as the dimensions are maintained relative to the surface of the earth.
clickable
boolean
Indicates whether this <code>Polyline</code> handles mouse events.
tag
string
styleSpans
StyleSpan[]
Used to specify the color of one or more segments of a polyline. The styleSpans property is an array of StyleSpan objects. Setting the spans property is the preferred way to change the color of a polyline. Only on iOS and Android.
A Position is an array of coordinates.
https://tools.ietf.org/html/rfc7946#section-3.1.1
Array should contain between two and three elements.
The previous GeoJSON specification allowed more elements (e.g., which could be used to represent M values),
but the current specification only allows X, Y, and (optionally) Z to be defined.