### Install Google Maps Capacitor Package Source: https://github.com/capacitor-community/google-maps/blob/main/docs/getting-started/installation.md Install the package from npm and sync with Capacitor. Ensure you have a billing account and the Maps SDK enabled for your project. ```bash npm i --save @capacitor-community/google-maps npx cap sync ``` -------------------------------- ### Listen for Camera Movement Start Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md Use this to detect when the user or application begins to move the camera on the map. Requires DefaultEventOptions. ```typescript didBeginMovingCamera(options: DefaultEventOptions, callback: DidBeginMovingCameraCallback) => Promise ``` -------------------------------- ### Bring WebView to Front (Android) Source: https://github.com/capacitor-community/google-maps/blob/main/docs/advanced-concepts/transparent-webview.md Ensures the WebView is rendered on top of the native map view on Android. No specific setup is required beyond calling this method. ```Java bridge.getWebView().bringToFront(); ``` -------------------------------- ### InitializeOptions Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md Options available when initializing the Google Maps plugin. ```APIDOC ## InitializeOptions ### Description Options available when initializing the Google Maps plugin. ### Parameters #### Request Body - **`devicePixelRatio`** (number) - Recommended to be set by using `window.devicePixelRatio`. This is needed because real pixels on a device do not necessarily correspond with how pixels are calculated in a WebView. (Since 2.0.0) - **`key`** (string) - (iOS only) API Key for Google Maps SDK for iOS. Hence it is only required on iOS. (Since 1.0.0) ``` -------------------------------- ### Initialization API Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md Methods for initializing and configuring the Google Maps plugin. ```APIDOC ## POST /initialize ### Description Initializes the Google Maps plugin with the provided options. ### Method POST ### Endpoint /initialize ### Parameters #### Request Body - **options** (InitializeOptions) - Required - Configuration options for map initialization. ### Request Example ```json { "apiKey": "YOUR_API_KEY", "language": "en", "region": "US" } ``` ### Response #### Success Response (200) - **void** - Indicates successful initialization. #### Response Example ```json null ``` ``` -------------------------------- ### Import CapacitorGoogleMaps Plugin Source: https://github.com/capacitor-community/google-maps/blob/main/docs/getting-started/quickstart.md Imports the necessary Maps plugin. Ensure this is done before attempting to use any of its methods. ```javascript import { CapacitorGoogleMaps } from "@capacitor-community/google-maps"; ``` -------------------------------- ### Initialize Map Instance Source: https://github.com/capacitor-community/google-maps/blob/main/docs/getting-started/quickstart.md Initializes the Google Maps SDK and creates a map instance within a specified HTML element. Requires an API key and the element's bounding rectangle. The background of the element is cleared, and a data attribute is set for touch event delegation. ```javascript const initializeMap = async () => { // first of all, you should initialize the Maps SDK: await CapacitorGoogleMaps.initialize({ key: "YOUR_IOS_MAPS_API_KEY", devicePixelRatio: window.devicePixelRatio, // this line is very important }); // then get the element you want to attach the Maps instance to: const element = document.getElementById("container"); // afterwards get its boundaries like so: const boundingRect = element.getBoundingClientRect(); // we can now create the map using the boundaries of #container try { const result = await CapacitorGoogleMaps.createMap({ boundingRect: { width: Math.round(boundingRect.width), height: Math.round(boundingRect.height), x: Math.round(boundingRect.x), y: Math.round(boundingRect.y), }, }); // remove background, so map can be seen // (you can read more about this in the "Setting up the WebView" guide) element.style.background = ""; // finally set `data-maps-id` attribute for delegating touch events element.setAttribute("data-maps-id", result.googleMap.mapId); alert("Map loaded successfully"); } catch (e) { alert("Map failed to load"); } }; (function () { // on page load, execute the above method initializeMap(); // Some frameworks and a recommended lifecycle hook you could use to initialize the Map: // Ionic: `ionViewDidEnter` // Angular: `mounted` // Vue: `mounted` // React: `componentDidMount` // Of course you can also initialize the Map on different events, like clicking on a button. // Just make sure you do not unnecessarily initialize it multiple times. })(); ``` -------------------------------- ### CreateMapOptions Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md Options required for creating a new map instance. ```APIDOC ## CreateMapOptions ### Description Options to configure when creating a map. ### Properties #### `element` - **Type**: `HTMLElement` - **Description**: The HTML element where the map will be rendered. #### `boundingRect` - **Type**: `[BoundingRect](#boundingrect)` - **Description**: Defines the size and position of the map element. #### `cameraPosition` - **Type**: `[CameraPosition](#cameraposition)` - **Description**: The initial position and zoom level of the camera. #### `preferences` - **Type**: `[MapPreferences](#mappreferences)` - **Description**: Map display preferences. ``` -------------------------------- ### didBeginDraggingMarker Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md Listens for the beginning of a marker drag event. ```APIDOC ## didBeginDraggingMarker ### Description Listens for the beginning of a marker drag event. ### Method `didBeginDraggingMarker` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body - **options** (DefaultEventOptions) - Required - Options for the event. - **callback** (DidBeginDraggingMarkerCallback) - Required - The callback function to execute when the event occurs. ### Request Example ```json { "options": {}, "callback": "() => void" } ``` ### Response #### Success Response (200) - **CallbackID** (string) - The ID of the registered callback. #### Response Example ```json { "result": "callback-id-string" } ``` ``` -------------------------------- ### MapAppearance Configuration Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md The `MapAppearance` object aggregates all appearance parameters for the Google Map. This includes settings for map tiles, custom styling, 3D buildings, indoor maps, and the 'my-location' dot. ```APIDOC ## MapAppearance Configuration Aggregates all appearance parameters such as showing 3d building, indoor maps, the my-location (blue) dot and traffic. Additionally, it also holds parameters such as the type of map tiles and the overall styling of the base map. ### Properties - **`type`** (MapType) - Required - Controls the type of map tiles that should be displayed. Defaults to `MapType.Normal`. - **`style`** (string) - Optional - Holds details about a style which can be applied to a map. When set to `null` the default styling will be used. With style options you can customize the presentation of the standard Google map styles, changing the visual display of features like roads, parks, and other points of interest. For more information check: https://developers.google.com/maps/documentation/ios-sdk/style-reference Or use the wizard for generating JSON: https://mapstyle.withgoogle.com/. Defaults to `null`. - **`isBuildingsShown`** (boolean) - Optional - If `true`, 3D buildings will be shown where available. Defaults to `true`. - **`isIndoorShown`** (boolean) - Optional - If `true`, indoor maps are shown, where available. If this is set to false, caches for indoor data may be purged and any floor currently selected by the end-user may be reset. Defaults to `true`. ``` -------------------------------- ### ElementFromPointResultOptions Type Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md Options for ElementFromPointResult. ```APIDOC ## ElementFromPointResultOptions Type ### Description Options for ElementFromPointResult. ### Properties - **`eventChainId`** (string) - **`mapId`** (string) - **`isSameNode`** (boolean) ``` -------------------------------- ### MapGestures Configuration Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md Configure various map gestures to control user interaction with the map. ```APIDOC ## MapGestures Configuration ### Description Aggregates all gesture parameters such as allowing for rotating, scrolling, tilting and zooming the map. ### Properties - **`isRotateAllowed`** (boolean) - Optional - If `true`, rotate gestures are allowed. If enabled, users can use a two-finger rotate gesture to rotate the camera. If disabled, users cannot rotate the camera via gestures. This setting doesn't restrict the user from tapping the compass button to reset the camera orientation, nor does it restrict programmatic movements and animation of the camera. Default: `true`. - **`isScrollAllowed`** (boolean) - Optional - If `true`, scroll gestures are allowed. If enabled, users can swipe to pan the camera. If disabled, swiping has no effect. This setting doesn't restrict programmatic movement and animation of the camera. Default: `true`. - **`isScrollAllowedDuringRotateOrZoom`** (boolean) - Optional - If `true`, scroll gestures can take place at the same time as a zoom or rotate gesture. If enabled, users can scroll the map while rotating or zooming the map. If disabled, the map cannot be scrolled while the user rotates or zooms the map using gestures. This setting doesn't disable scroll gestures entirely, only during rotation and zoom gestures, nor does it restrict programmatic movements and animation of the camera. Default: `true`. - **`isTiltAllowed`** (boolean) - Optional - If `true`, tilt gestures are allowed. If enabled, users can use a two-finger vertical down swipe to tilt the camera. If disabled, users cannot tilt the camera via gestures. This setting doesn't restrict users from tapping the compass button to reset the camera orientation, nor does it restrict programmatic movement and animation of the camera. Default: `true`. - **`isZoomAllowed`** (boolean) - Optional - If `true`, zoom gestures are allowed. If enabled, users can either double tap/two-finger tap or pinch to zoom the camera. If disabled, these gestures have no effect. This setting doesn't affect the zoom buttons, nor does it restrict programmatic movement and animation of the camera. Default: `true`. ``` -------------------------------- ### Add Markers Options Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md Options for adding multiple markers to the map. ```APIDOC ## Add Markers Options ### Description Options used when adding multiple markers to the map. ### Properties - **`mapId`** (string) - Required - The ID of the map to add the markers to. - **`markers`** (MarkerInputEntry[]) - Required - An array of marker input entries to be added to the map. ``` -------------------------------- ### DidBeginDraggingMarkerResult Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md Result object when marker dragging begins. ```APIDOC ## DidBeginDraggingMarkerResult ### Description Result object when marker dragging begins. ### Response #### Success Response (200) - **`marker`** (Marker) - The marker that is being dragged. ``` -------------------------------- ### MapControls Configuration Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md Aggregates all control parameters such as enabling the compass, my-location and zoom buttons as well as the toolbar. ```APIDOC ## MapControls ### Description Aggregates all control parameters such as enabling the compass, my-location and zoom buttons as well as the toolbar. ### Properties #### `isCompassButtonEnabled` (boolean) - Optional - If `true`, the compass button is enabled. The compass is an icon on the map that indicates the direction of north on the map. If enabled, it is only shown when the camera is rotated away from its default orientation (bearing of 0). When a user taps the compass, the camera orients itself to its default orientation and fades away shortly after. If disabled, the compass will never be displayed. Default: `true` #### `isMapToolbarEnabled` (boolean) - Optional - (Android only) If `true`, the Map Toolbar is enabled. If enabled, and the Map Toolbar can be shown in the current context, users will see a bar with various context-dependent actions, including 'open this map in the Google Maps app' and 'find directions to the highlighted marker in the Google Maps app'. Default: `false` #### `isMyLocationButtonEnabled` (boolean) - Optional - If `true`, the my-location button is enabled. This is a button visible on the map that, when tapped by users, will center the map on the current user location. If the button is enabled, it is only shown when [`MapAppearance.isMyLocationDotShown](#mapappearance) === true`. Default: `true` #### `isZoomButtonsEnabled` (boolean) - Optional - (Android only) If `true`, the zoom controls are enabled. The zoom controls are a pair of buttons (one for zooming in, one for zooming out) that appear on the screen when enabled. When pressed, they cause the camera to zoom in (or out) by one zoom level. If disabled, the zoom controls are not shown. Default: `false` ``` -------------------------------- ### PluginListenerHandle Type Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md Handle for managing plugin listeners. ```APIDOC ## PluginListenerHandle Type ### Description Handle for managing plugin listeners. ### Properties - **`remove`** - () => Promise ``` -------------------------------- ### Enums Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md Enumerations for map types and camera movement reasons. ```APIDOC ## Enums ### MapType | Members | Value | Description | | --------------- | ------ | ---------------------------------------- | | **`None`** | `0` | No base map tiles. | | **`Normal`** | `1` | Basic map. | | **`Satellite`** | `2` | Satellite imagery with no labels. | | **`Terrain`** | `3` | Topographic data. | | **`Hybrid`** | `4` | Satellite imagery with roads and labels. | ### CameraMovementReason | Members | Value | Description | | ------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **`Gesture`** | `1` | Camera motion initiated in response to user gestures on the map. For example: pan, tilt, pinch to zoom, or rotate. | | **`Other`** | `2` | Indicates that this is part of a programmatic change - for example, via methods such as `moveCamera`. This may also be the case if a user has tapped on the My Location or compass buttons, which generate animations that change the camera. | ``` -------------------------------- ### Listen for Camera Movement Completion Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md Use this to detect when the camera has finished its movement on the map. Requires DefaultEventOptions. ```typescript didMoveCamera(options: DefaultEventOptions, callback: DidMoveCameraCallback) => Promise ``` -------------------------------- ### Add Marker Options Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md Options for adding a single marker to the map. ```APIDOC ## Add Marker Options ### Description Options used when adding a single marker to the map. ### Properties - **`mapId`** (string) - Required - The ID of the map to add the marker to. - **`position`** ([LatLng](#latlng)) - Required - The geographical coordinates for the marker. - **`preferences`** ([MarkerPreferences](#markerpreferences)) - Optional - Customization options for the marker's appearance and behavior. ``` -------------------------------- ### Marker Preferences Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md Configuration options for customizing the appearance and behavior of markers. ```APIDOC ## Marker Preferences ### Description Options for customizing marker appearance and behavior. ### Properties #### `anchor` - **`x`** (number) - Required - The x-coordinate of the anchor point in the marker image, ranging from 0.0 to 1.0. - **`y`** (number) - Required - The y-coordinate of the anchor point in the marker image, ranging from 0.0 to 1.0. ### MarkerIcon A data class representing an icon/marker. #### Properties - **`url`** (string) - Required - URL path to the icon. - **`size`** ([MarkerIconSize](#markericonsize)) - Optional - Target icon size in pixels. Defaults to 30x30 if not specified. ### MarkerIconSize A data class representing a pair of "width" and "height" in pixels. #### Properties - **`width`** (number) - Optional - Width in pixels. Defaults to 30. - **`height`** (number) - Optional - Height in pixels. Defaults to 30. #### `metadata` - **`{ [key: string]: any; }`** - Optional - An arbitrary object to associate with the overlay. Use with caution to avoid retain cycles. ``` -------------------------------- ### String Properties and Methods Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md This section details the properties and methods available for string manipulation. ```APIDOC ## String Properties ### `length` - **Type**: `number` - **Description**: Returns the length of a [String](#string) object. ``` ```APIDOC ## String Methods ### `toString` - **Signature**: `() => string` - **Description**: Returns a string representation of a string. ``` ```APIDOC ### `charAt` - **Signature**: `(pos: number) => string` - **Description**: Returns the character at the specified index. ``` ```APIDOC ### `charCodeAt` - **Signature**: `(index: number) => number` - **Description**: Returns the Unicode value of the character at the specified location. ``` ```APIDOC ### `concat` - **Signature**: `(...strings: string[]) => string` - **Description**: Returns a string that contains the concatenation of two or more strings. ``` ```APIDOC ### `indexOf` - **Signature**: `(searchString: string, position?: number) => number` - **Description**: Returns the position of the first occurrence of a substring. ``` ```APIDOC ### `lastIndexOf` - **Signature**: `(searchString: string, position?: number) => number` - **Description**: Returns the last occurrence of a substring in the string. ``` ```APIDOC ### `localeCompare` - **Signature**: `(that: string) => number` - **Description**: Determines whether two strings are equivalent in the current locale. ``` ```APIDOC ### `match` - **Signature**: `(regexp: string | [RegExp](#regexp)) => [RegExpMatchArray](#regexpmatcharray) | null` - **Description**: Matches a string with a regular expression, and returns an array containing the results of that search. ``` ```APIDOC ### `replace` (overload 1) - **Signature**: `(searchValue: string | [RegExp](#regexp), replaceValue: string) => string` - **Description**: Replaces text in a string, using a regular expression or search string. ``` ```APIDOC ### `replace` (overload 2) - **Signature**: `(searchValue: string | [RegExp](#regexp), replacer: (substring: string, ...args: any[]) => string) => string` - **Description**: Replaces text in a string, using a regular expression or search string. ``` ```APIDOC ### `search` - **Signature**: `(regexp: string | [RegExp](#regexp)) => number` - **Description**: Finds the first substring match in a regular expression search. ``` ```APIDOC ### `slice` - **Signature**: `(start?: number, end?: number) => string` - **Description**: Returns a section of a string. ``` ```APIDOC ### `split` - **Signature**: `(separator: string | [RegExp](#regexp), limit?: number) => string[]` - **Description**: Split a string into substrings using the specified separator and return them as an array. ``` -------------------------------- ### Map Preferences Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md Options to configure map display preferences. ```APIDOC ## Map Preferences ### Description Configuration options for map display. ### Properties #### `isMyLocationDotShown` - **Type**: `boolean` - **Default**: `false` - **Description**: If `true`, the my-location (blue) dot and accuracy circle are shown. #### `isTrafficShown` - **Type**: `boolean` - **Default**: `false` - **Description**: If `true`, the map draws traffic data, if available. This is subject to the availability of traffic data. ``` -------------------------------- ### RegExp Object Methods Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md Methods available on the RegExp object. ```APIDOC ## RegExp Object Methods ### Description Methods available on the RegExp object. ### Methods - **`exec`** - (string: string) => [RegExpExecArray](#regexpexecarray) | null - Executes a search on a string using a regular expression pattern, and returns an array containing the results of that search. - **`test`** - (string: string) => boolean - Returns a Boolean value that indicates whether or not a pattern exists in a searched string. - **`compile`** - () => this - ``` -------------------------------- ### Camera Movement Parameters Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md Parameters that control camera animation and positioning. ```APIDOC ## Camera Movement Parameters ### Description Parameters that control camera animation and positioning. ### Parameters #### Request Body - **`duration`** (number) - Optional - The duration of the animation in milliseconds. If not specified, or equals or smaller than 0, the camera movement will be immediate. - **`useCurrentCameraPositionAsBase`** (boolean) - Optional - By default the moveCamera method uses the current [CameraPosition](#cameraposition) as the base. If instead of this default behaviour, the previous [CameraPosition](#cameraposition) should be used as the base, this parameter should be set to `false`. Be cautious when using this, as it may undo user changes to the camera position. ### Request Example ```json { "duration": 1000, "useCurrentCameraPositionAsBase": false } ``` ``` -------------------------------- ### DidBeginMovingCameraResult Type Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md Result type for when the camera begins moving. ```APIDOC ## DidBeginMovingCameraResult Type ### Description Result type for when the camera begins moving. ### Properties - **`reason`** ([CameraMovementReason](#cameramovementreason)) ``` -------------------------------- ### Listen for Camera Movement End Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md Use this to detect when the user or application has finished moving the camera on the map. Requires DefaultEventOptions. ```typescript didEndMovingCamera(options: DefaultEventOptions, callback: DidEndMovingCameraCallback) => Promise ``` -------------------------------- ### Camera and Marker API Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md Methods for controlling the map's camera and managing markers. ```APIDOC ## POST /moveCamera ### Description Animates the map's camera to a new position and zoom level. ### Method POST ### Endpoint /moveCamera ### Parameters #### Request Body - **options** (MoveCameraOptions) - Required - Options defining the target camera position, including latitude, longitude, and zoom. ### Request Example ```json { "mapId": "map_123", "camera": { "latitude": 34.0522, "longitude": -118.2437, "zoom": 11 } } ``` ### Response #### Success Response (200) - **void** - Indicates successful camera movement. #### Response Example ```json null ``` ## POST /addMarker ### Description Adds a single marker to the map. ### Method POST ### Endpoint /addMarker ### Parameters #### Request Body - **options** (AddMarkerOptions) - Required - Options for the marker, including position, title, and snippet. ### Request Example ```json { "mapId": "map_123", "marker": { "latitude": 34.0522, "longitude": -118.2437, "title": "Los Angeles", "snippet": "City Hall" } } ``` ### Response #### Success Response (200) - **AddMarkerResult** - An object containing the result of adding the marker, potentially including a marker ID. #### Response Example ```json { "markerId": "marker_abc" } ``` ## POST /addMarkers ### Description Adds multiple markers to the map. ### Method POST ### Endpoint /addMarkers ### Parameters #### Request Body - **options** (AddMarkersOptions) - Required - An array of marker options to add to the map. ### Request Example ```json { "mapId": "map_123", "markers": [ { "latitude": 34.0522, "longitude": -118.2437, "title": "LA City Hall" }, { "latitude": 34.0522, "longitude": -118.2437, "title": "Dodger Stadium" } ] } ``` ### Response #### Success Response (200) - **AddMarkersResult** - An object containing the result of adding the markers. #### Response Example ```json { "markerIds": ["marker_abc", "marker_def"] } ``` ## POST /removeMarker ### Description Removes a specific marker from the map. ### Method POST ### Endpoint /removeMarker ### Parameters #### Request Body - **options** (RemoveMarkerOptions) - Required - Options specifying which marker to remove, typically by marker ID. ### Request Example ```json { "mapId": "map_123", "markerId": "marker_abc" } ``` ### Response #### Success Response (200) - **void** - Indicates successful marker removal. #### Response Example ```json null ``` ``` -------------------------------- ### RegExpMatchArray Properties Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md Details the properties available in the RegExpMatchArray object. ```APIDOC ## RegExpMatchArray ### Properties - **`index`** (number) - The index at which the match was found. - **`input`** (string) - The original string that was searched. ``` -------------------------------- ### DefaultEventOptions Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md Default options for map events. ```APIDOC ## DefaultEventOptions ### Description Default options for map events. ### Parameters #### Request Body - **`mapId`** (string) - Required - The ID of the map. ``` -------------------------------- ### GoogleMap Object Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md Represents a Google Map instance with its properties. ```APIDOC ## GoogleMap Object ### Description Represents a Google Map instance with its properties. ### Properties - **`mapId`** (string) - GUID representing the unique id of this map. (Since 2.0.0) - **`cameraPosition`** ([CameraPosition](#cameraposition)) - The initial position of the map's camera. (Since 2.0.0) - **`preferences`** ([MapPreferences](#mappreferences)) - User preferences for the map. (Since 2.0.0) ``` -------------------------------- ### CreateMapResult Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md The result object returned after successfully creating a map. ```APIDOC ## CreateMapResult ### Description The result object returned after successfully creating a map. ### Response #### Success Response (200) - **`googleMap`** ([GoogleMap](#googlemap)) - The created GoogleMap instance. (Since 2.0.0) ``` -------------------------------- ### MoveCameraOptions Interface Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md Defines the options available when moving the camera of a Google Map instance. ```APIDOC ## MoveCameraOptions ### Description Options for moving the camera of a Google Map. ### Properties #### `mapId` (string) - Optional - The identifier of the map to which this method should be applied. #### `cameraPosition` (CameraPosition) - Optional - Specifies the new camera position. ### Type Definitions #### `CameraPosition` (Details for CameraPosition would typically be here, but are not provided in the source text.) ``` -------------------------------- ### Element Interaction and Listener Management Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md Methods for interacting with map elements and managing event listeners. ```APIDOC ## POST /api/google-maps/element/from-point/result ### Description Provides the result of a point-in-element query to the WebView. This is typically handled automatically and not intended for direct use. ### Method POST ### Endpoint /api/google-maps/element/from-point/result ### Parameters #### Request Body - **options** (ElementFromPointResultOptions) - Required - Options containing the result of the element query. ### Request Example ```json { "options": { "element": "some-element-id", "x": 100, "y": 200 } } ``` ## POST /api/google-maps/listeners/didRequestElementFromPoint ### Description Listens for touch events on the WebView to determine which map element is being interacted with. This is handled automatically and usually not required for direct use. ### Method POST ### Endpoint /api/google-maps/listeners/didRequestElementFromPoint ### Parameters #### Request Body - **eventName** (string) - Required - Must be 'didRequestElementFromPoint'. - **listenerFunc** (function) - Required - The callback function to execute when the event occurs. It receives a result object. ### Response #### Success Response (200) - **pluginListenerHandle** ([PluginListenerHandle](#pluginlistenerhandle)) - A handle to the registered listener. ### Request Example ```json { "eventName": "didRequestElementFromPoint", "listenerFunc": "function(result) { console.log(result); }" } ``` ### Response Example ```json { "pluginListenerHandle": { "remove": "function() {}" } } ``` ## POST /api/google-maps/listeners/add ### Description Adds a generic event listener to the map. ### Method POST ### Endpoint /api/google-maps/listeners/add ### Parameters #### Request Body - **eventName** (string) - Required - The name of the event to listen for. - **listenerFunc** (function) - Required - The callback function to execute when the event occurs. ### Response #### Success Response (200) - **pluginListenerHandle** ([PluginListenerHandle](#pluginlistenerhandle)) - A handle to the registered listener. ### Request Example ```json { "eventName": "someCustomEvent", "listenerFunc": "function(...args) { console.log(args); }" } ``` ### Response Example ```json { "pluginListenerHandle": { "remove": "function() {}" } } ``` ## DELETE /api/google-maps/listeners/removeAll ### Description Removes all event listeners that have been registered. ### Method DELETE ### Endpoint /api/google-maps/listeners/removeAll ### Response #### Success Response (200) - **void** - This endpoint does not return a value upon success. ``` -------------------------------- ### Map Creation and Management API Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md Methods for creating, updating, removing, and clearing maps. ```APIDOC ## POST /createMap ### Description Creates a new Google Map instance with the specified options. ### Method POST ### Endpoint /createMap ### Parameters #### Request Body - **options** (CreateMapOptions) - Required - Options for creating the map, including element ID, camera position, and map type. ### Request Example ```json { "id": "map_canvas", "camera": { "latitude": 33.68456, "longitude": -117.82651, "zoom": 12 }, "mapType": "MAP_TYPE_NORMAL" } ``` ### Response #### Success Response (200) - **CreateMapResult** - An object containing the result of the map creation, typically including a map ID. #### Response Example ```json { "mapId": "map_123" } ``` ## POST /updateMap ### Description Updates the properties of an existing Google Map. ### Method POST ### Endpoint /updateMap ### Parameters #### Request Body - **options** (UpdateMapOptions) - Required - Options to update the map, such as camera position or map type. ### Request Example ```json { "mapId": "map_123", "camera": { "latitude": 34.0522, "longitude": -118.2437, "zoom": 10 } } ``` ### Response #### Success Response (200) - **UpdateMapResult** - An object containing the result of the map update. #### Response Example ```json { "status": "success" } ``` ## POST /removeMap ### Description Removes a Google Map instance from the DOM and cleans up resources. ### Method POST ### Endpoint /removeMap ### Parameters #### Request Body - **options** (RemoveMapOptions) - Required - Options specifying which map to remove, typically by map ID. ### Request Example ```json { "mapId": "map_123" } ``` ### Response #### Success Response (200) - **void** - Indicates successful removal. #### Response Example ```json null ``` ## POST /clearMap ### Description Clears all markers, polygons, and other overlays from a Google Map. ### Method POST ### Endpoint /clearMap ### Parameters #### Request Body - **options** (ClearMapOptions) - Required - Options specifying which map to clear, typically by map ID. ### Request Example ```json { "mapId": "map_123" } ``` ### Response #### Success Response (200) - **void** - Indicates successful clearing. #### Response Example ```json null ``` ``` -------------------------------- ### MarkerPreferences API Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md This section outlines the properties that can be used to configure the appearance and behavior of markers on the Google Map. ```APIDOC ## MarkerPreferences ### Description Configuration options for customizing the appearance and behavior of map markers. ### Properties #### `title` - **`title`** (string) - Optional - A text string displayed in an info window when the user taps the marker. Can be changed at any time. #### `snippet` - **`snippet`** (string) - Optional - Additional text displayed below the title in the info window. Can be changed at any time. #### `opacity` - **`opacity`** (number) - Optional - Controls the transparency of the marker. Value ranges from 0 (completely transparent) to 1 (completely opaque). Default is 1. #### `isFlat` - **`isFlat`** (boolean) - Optional - Determines if the marker lies flat against the Earth's surface (`true`) or acts as a billboard facing the camera (`false`). Default is `false`. #### `isDraggable` - **`isDraggable`** (boolean) - Optional - Controls whether the marker can be interactively dragged by the user. When true, users can move the marker by long-pressing on it. Default is `false`. #### `zIndex` - **`zIndex`** (number) - Optional - Specifies the stack order of the marker relative to other markers. Higher z-index values are drawn on top. Default is 0. ``` -------------------------------- ### Listen for Element From Point Request Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md This listener is for touch events on the WebView and is handled automatically. You should probably not use it directly. ```typescript addListener(eventName: "didRequestElementFromPoint", listenerFunc: (result: DidRequestElementFromPointResult) => void) => PluginListenerHandle ``` -------------------------------- ### DidTapInfoWindowResult Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md Result object when an info window is tapped. ```APIDOC ## DidTapInfoWindowResult ### Description Result object when an info window is tapped. ### Response #### Success Response (200) - **`marker`** (Marker) - The marker associated with the info window. ``` -------------------------------- ### MapPreferences Configuration Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md Defines various preferences for the map's behavior and appearance. ```APIDOC ## MapPreferences ### Properties - **`gestures`** ([MapGestures](#mapgestures)) - Optional - Configuration for map gestures. - **`controls`** ([MapControls](#mapcontrols)) - Optional - Configuration for map controls. - **`appearance`** ([MapAppearance](#mapappearance)) - Optional - Configuration for map appearance. - **`maxZoom`** (number) - Optional - The maximum zoom level allowed for the map. - **`minZoom`** (number) - Optional - The minimum zoom level allowed for the map. - **`padding`** (any) - Optional - Padding to be applied to the map. - **`liteMode`** (boolean) - Optional - Enables lite mode for the map, reducing resource usage. ``` -------------------------------- ### didTapMarker Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md Listens for tap events on a marker. ```APIDOC ## didTapMarker ### Description Listens for tap events on a marker. ### Method `didTapMarker` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body - **options** (DefaultEventWithPreventDefaultOptions) - Required - Options for the event. - **callback** (DidTapMarkerCallback) - Required - The callback function to execute when the event occurs. ### Request Example ```json { "options": {}, "callback": "() => void" } ``` ### Response #### Success Response (200) - **CallbackID** (string) - The ID of the registered callback. #### Response Example ```json { "result": "callback-id-string" } ``` ``` -------------------------------- ### CameraPosition Configuration Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md Defines the camera's perspective on the map, including its target location, bearing, tilt, and zoom level. ```APIDOC ## CameraPosition The map view is modeled as a camera looking down on a flat plane. The position of the camera (and hence the rendering of the map) is specified by the following properties: target (latitude/longitude location), bearing, tilt, and zoom. More information can be found here: https://developers.google.com/maps/documentation/android-sdk/views#the_camera_position ### Properties - **`target`** ([LatLng](#latlng)) - Required - The camera target is the location of the center of the map, specified as latitude and longitude co-ordinates. - **`bearing`** (number) - Required - The camera bearing is the direction in which a vertical line on the map points, measured in degrees clockwise from north. Someone driving a car often turns a road map to align it with their direction of travel, while hikers using a map and compass usually orient the map so that a vertical line is pointing north. The Maps API lets you change a map's alignment or bearing. For example, a bearing of 90 degrees results in a map where the upwards direction points due east. - **`tilt`** (number) - Required - The tilt defines the camera's position on an arc between directly over the map's center position and the surface of the Earth, measured in degrees from the nadir (the direction pointing directly below the camera). When you change the viewing angle, the map appears in perspective, with far-away features appearing smaller, and nearby features appearing larger. - **`zoom`** (number) - Required - The zoom level of the camera determines the scale of the map. At larger zoom levels more detail can be seen on the screen, while at smaller zoom levels more of the world can be seen on the screen. ``` -------------------------------- ### Marker Output Entry Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md Represents a marker after it has been added to the map. ```APIDOC ## Marker Output Entry ### Description Represents a marker after it has been added to the map. ### Properties - **`markerId`** (string) - Required - A unique GUID representing the ID of this marker. - **`position`** ([LatLng](#latlng)) - Required - The geographical coordinates of the marker. - **`preferences`** ([MarkerPreferences](#markerpreferences)) - Optional - Customization options for the marker's appearance and behavior. ``` -------------------------------- ### RegExp Object Properties Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md Properties available on the RegExp object. ```APIDOC ## RegExp Object Properties ### Description Properties available on the RegExp object. ### Properties - **`source`** (string) - Returns a copy of the text of the regular expression pattern. Read-only. The regExp argument is a Regular expression object. It can be a variable name or a literal. - **`global`** (boolean) - Returns a Boolean value indicating the state of the global flag (g) used with a regular expression. Default is false. Read-only. - **`ignoreCase`** (boolean) - Returns a Boolean value indicating the state of the ignoreCase flag (i) used with a regular expression. Default is false. Read-only. - **`multiline`** (boolean) - Returns a Boolean value indicating the state of the multiline flag (m) used with a regular expression. Default is false. Read-only. - **`lastIndex`** (number) - ``` -------------------------------- ### Event Handling API Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md Methods for subscribing to and handling map-related events. ```APIDOC ## POST /didTapInfoWindow ### Description Subscribes to the event that is triggered when an info window on a marker is tapped. ### Method POST ### Endpoint /didTapInfoWindow ### Parameters #### Request Body - **options** (DefaultEventOptions) - Required - Options specifying the map and potentially other event-related settings. - **callback** (DidTapInfoWindowCallback) - Required - The callback function to execute when the event occurs. ### Request Example ```json { "mapId": "map_123" } ``` ### Response #### Success Response (200) - **CallbackID** - A unique identifier for the registered callback. #### Response Example ```json "callback_xyz" ``` ## POST /didCloseInfoWindow ### Description Subscribes to the event that is triggered when an info window on a marker is closed. ### Method POST ### Endpoint /didCloseInfoWindow ### Parameters #### Request Body - **options** (DefaultEventOptions) - Required - Options specifying the map and potentially other event-related settings. - **callback** (DidCloseInfoWindowCallback) - Required - The callback function to execute when the event occurs. ### Request Example ```json { "mapId": "map_123" } ``` ### Response #### Success Response (200) - **CallbackID** - A unique identifier for the registered callback. #### Response Example ```json "callback_xyz" ``` ## POST /didTapMap ### Description Subscribes to the event that is triggered when the map is tapped. ### Method POST ### Endpoint /didTapMap ### Parameters #### Request Body - **options** (DefaultEventOptions) - Required - Options specifying the map and potentially other event-related settings. - **callback** (DidTapMapCallback) - Required - The callback function to execute when the event occurs. ### Request Example ```json { "mapId": "map_123" } ``` ### Response #### Success Response (200) - **CallbackID** - A unique identifier for the registered callback. #### Response Example ```json "callback_xyz" ``` ``` -------------------------------- ### Camera Movement Event Listeners Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md These methods allow you to listen for events related to camera movement on the Google Map. ```APIDOC ## POST /api/google-maps/camera/move/begin ### Description Listens for the event that occurs when the camera starts moving. ### Method POST ### Endpoint /api/google-maps/camera/move/begin ### Parameters #### Query Parameters - **options** (DefaultEventOptions) - Required - Options for the event listener. - **callback** (DidBeginMovingCameraCallback) - Required - The function to call when the event fires. ### Response #### Success Response (200) - **callbackId** (string) - The ID of the registered callback. ### Request Example ```json { "options": {}, "callback": "myCallbackFunction" } ``` ### Response Example ```json { "callbackId": "some-unique-id" } ``` ## POST /api/google-maps/camera/move/end ### Description Listens for the event that occurs when the camera finishes moving. ### Method POST ### Endpoint /api/google-maps/camera/move/end ### Parameters #### Query Parameters - **options** (DefaultEventOptions) - Required - Options for the event listener. - **callback** (DidEndMovingCameraCallback) - Required - The function to call when the event fires. ### Response #### Success Response (200) - **callbackId** (string) - The ID of the registered callback. ### Request Example ```json { "options": {}, "callback": "myCallbackFunction" } ``` ### Response Example ```json { "callbackId": "some-unique-id" } ``` ## POST /api/google-maps/camera/moved ### Description Listens for the event that occurs after the camera has finished moving. ### Method POST ### Endpoint /api/google-maps/camera/moved ### Parameters #### Query Parameters - **options** (DefaultEventOptions) - Required - Options for the event listener. - **callback** (DidMoveCameraCallback) - Required - The function to call when the event fires. ### Response #### Success Response (200) - **callbackId** (string) - The ID of the registered callback. ### Request Example ```json { "options": {}, "callback": "myCallbackFunction" } ``` ### Response Example ```json { "callbackId": "some-unique-id" } ``` ``` -------------------------------- ### UpdateMapOptions Source: https://github.com/capacitor-community/google-maps/blob/main/docs/api.md Options for updating an existing map. ```APIDOC ## UpdateMapOptions ### Description Options to update an existing map. ### Properties #### `mapId` - **Type**: `string` - **Description**: The unique identifier of the map to update. #### `element` - **Type**: `HTMLElement` - **Description**: The HTML element where the map is rendered. #### `boundingRect` - **Type**: `[BoundingRect](#boundingrect)` - **Description**: Defines the new size and position of the map element. #### `preferences` - **Type**: `[MapPreferences](#mappreferences)` - **Description**: New map display preferences. ``` -------------------------------- ### Search Location by Place Name Source: https://github.com/capacitor-community/google-maps/blob/main/docs/about/out-of-scope-features.md Launches Google Maps to search for a location using its place name. No API key is required. ```url https://www.google.com/maps/search/?api=1&query=centurylink+field ```