capacitor-custom-google-maps

capacitor custom plugin google maps

• add function for create circle on the maps (support for web, android and ios)
• support hide my location button if the my location is true

Install

npm install capacitor-custom-google-maps
npx cap sync

API

• create(...)
• addCircle(...)
• addMarker(...)
• addMarkers(...)
• removeMarker(...)
• removeMarkers(...)
• enableClustering(...)
• disableClustering(...)
• destroy(...)
• setCamera(...)
• setMapType(...)
• enableIndoorMaps(...)
• enableTrafficLayer(...)
• enableAccessibilityElements(...)
• enableCurrentLocation(...)
• setMyLocationButtonEnabled(...)
• setPadding(...)
• onScroll(...)
• dispatchMapEvent(...)
• getMapBounds(...)
• checkMockLocation(...)
• Interfaces
• Enums

create(...)

create(options: CreateMapArgs) => Promise<void>

| Param | Type | | ------------- | ------------------------------------------------------- | | options | CreateMapArgs |

addCircle(...)

addCircle(args: CircleOptions) => Promise<void>

| Param | Type | | ---------- | ------------------------------------------------------- | | args | CircleOptions |

addMarker(...)

addMarker(args: AddMarkerArgs) => Promise<{ id: string; }>

| Param | Type | | ---------- | ------------------------------------------------------- | | args | AddMarkerArgs |

Returns: Promise<{ id: string; }>

addMarkers(...)

addMarkers(args: AddMarkersArgs) => Promise<{ ids: string[]; }>

| Param | Type | | ---------- | --------------------------------------------------------- | | args | AddMarkersArgs |

Returns: Promise<{ ids: string[]; }>

removeMarker(...)

removeMarker(args: RemoveMarkerArgs) => Promise<void>

| Param | Type | | ---------- | ------------------------------------------------------------- | | args | RemoveMarkerArgs |

removeMarkers(...)

removeMarkers(args: RemoveMarkersArgs) => Promise<void>

| Param | Type | | ---------- | --------------------------------------------------------------- | | args | RemoveMarkersArgs |

enableClustering(...)

enableClustering(args: { id: string; }) => Promise<void>

| Param | Type | | ---------- | ---------------------------- | | args | { id: string; } |

disableClustering(...)

disableClustering(args: { id: string; }) => Promise<void>

| Param | Type | | ---------- | ---------------------------- | | args | { id: string; } |

destroy(...)

destroy(args: DestroyMapArgs) => Promise<void>

| Param | Type | | ---------- | --------------------------------------------------------- | | args | DestroyMapArgs |

setCamera(...)

setCamera(args: CameraArgs) => Promise<void>

| Param | Type | | ---------- | ------------------------------------------------- | | args | CameraArgs |

setMapType(...)

setMapType(args: MapTypeArgs) => Promise<void>

| Param | Type | | ---------- | --------------------------------------------------- | | args | MapTypeArgs |

enableIndoorMaps(...)

enableIndoorMaps(args: IndoorMapArgs) => Promise<void>

| Param | Type | | ---------- | ------------------------------------------------------- | | args | IndoorMapArgs |

enableTrafficLayer(...)

enableTrafficLayer(args: TrafficLayerArgs) => Promise<void>

| Param | Type | | ---------- | ------------------------------------------------------------- | | args | TrafficLayerArgs |

enableAccessibilityElements(...)

enableAccessibilityElements(args: AccElementsArgs) => Promise<void>

| Param | Type | | ---------- | ----------------------------------------------------------- | | args | AccElementsArgs |

enableCurrentLocation(...)

enableCurrentLocation(args: CurrentLocArgs) => Promise<void>

| Param | Type | | ---------- | --------------------------------------------------------- | | args | CurrentLocArgs |

setMyLocationButtonEnabled(...)

setMyLocationButtonEnabled(args: CurrentLocArgs) => Promise<void>

| Param | Type | | ---------- | --------------------------------------------------------- | | args | CurrentLocArgs |

setPadding(...)

setPadding(args: PaddingArgs) => Promise<void>

| Param | Type | | ---------- | --------------------------------------------------- | | args | PaddingArgs |

onScroll(...)

onScroll(args: OnScrollArgs) => Promise<void>

| Param | Type | | ---------- | ----------------------------------------------------- | | args | OnScrollArgs |

dispatchMapEvent(...)

dispatchMapEvent(args: { id: string; focus: boolean; }) => Promise<void>

| Param | Type | | ---------- | -------------------------------------------- | | args | { id: string; focus: boolean; } |

getMapBounds(...)

getMapBounds(args: { id: string; }) => Promise<LatLngBounds>

| Param | Type | | ---------- | ---------------------------- | | args | { id: string; } |

Returns: Promise<LatLngBounds>

checkMockLocation(...)

checkMockLocation(args: { id: string; }) => Promise<{ isMockLocation: boolean; }>

| Param | Type | | ---------- | ---------------------------- | | args | { id: string; } |

Returns: Promise<{ isMockLocation: boolean; }>

Interfaces

CreateMapArgs

An interface containing the options used when creating a map.

| Prop | Type | Description | Default | | ----------------- | ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | ------------------ | | id | string | A unique identifier for the map instance. | | | apiKey | string | The Google Maps SDK API Key. | | | config | GoogleMapConfig | The initial configuration settings for the map. | | | element | HTMLElement | 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 |

GoogleMapConfig

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. | | | | center | LatLng | 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. | | 4.3.0 |

LatLng

An interface representing a pair of latitude and longitude coordinates.

| Prop | Type | Description | | --------- | ------------------- | ------------------------------------------------------------------------- | | lat | number | Coordinate latitude, in degrees. This value is in the range [-90, 90]. | | lng | number | Coordinate longitude, in degrees. This value is in the range [-180, 180]. |

CircleOptions

An interface representing the viewports latitude and longitude bounds.

| Prop | Type | | ----------------- | ----------------------------------------- | | radius | number | | mapId | string | | center | LatLng | | fillColor | string | | strokeColor | string | | strokeWidth | number |

AddMarkerArgs

| Prop | Type | | ------------ | ----------------------------------------- | | id | string | | marker | Marker |

Marker

A marker is an icon placed at a particular point on the map's surface.

| Prop | Type | Description | Default | Since | | ---------------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ----- | | coordinate | LatLng | Marker position | | | | opacity | number | 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. | | 4.2.0 | | iconSize | Size | Controls the scaled size of the marker image set in iconUrl. | | 4.2.0 | | iconOrigin | Point | The position of the image within a sprite, if any. By default, the origin is located at the top left corner of the image . | | 4.2.0 | | iconAnchor | Point | 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 | |

Size

| Prop | Type | | ------------ | ------------------- | | width | number | | height | number |

Point

| Prop | Type | | ------- | ------------------- | | x | number | | y | number |

AddMarkersArgs

| Prop | Type | | ------------- | --------------------- | | id | string | | markers | Marker[] |

RemoveMarkerArgs

| Prop | Type | | -------------- | ------------------- | | id | string | | markerId | string |

RemoveMarkersArgs

| Prop | Type | | --------------- | --------------------- | | id | string | | markerIds | string[] |

DestroyMapArgs

| Prop | Type | | -------- | ------------------- | | id | string |

CameraArgs

| Prop | Type | | ------------ | ----------------------------------------------------- | | id | string | | config | CameraConfig |

CameraConfig

Configuration properties for a Google Map Camera

| Prop | Type | Description | Default | | ----------------------- | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------ | | coordinate | LatLng | Location on the Earth towards which the camera points. | | | zoom | number | Sets the zoom of the map. | | | bearing | number | Bearing of the camera, in degrees clockwise from true north. | 0 | | angle | number | The angle, in degrees, of the camera from the nadir (directly facing the Earth). The only allowed values are 0 and 45. | 0 | | animate | boolean | Animate the transition to the new Camera properties. | false | | animationDuration | number | This configuration option is not being used. | |

MapTypeArgs

| Prop | Type | | ------------- | ------------------------------------------- | | id | string | | mapType | MapType |

IndoorMapArgs

| Prop | Type | | ------------- | -------------------- | | id | string | | enabled | boolean |

TrafficLayerArgs

| Prop | Type | | ------------- | -------------------- | | id | string | | enabled | boolean |

AccElementsArgs

| Prop | Type | | ------------- | -------------------- | | id | string | | enabled | boolean |

CurrentLocArgs

| Prop | Type | | ------------- | -------------------- | | id | string | | enabled | boolean |

PaddingArgs

| Prop | Type | | ------------- | ------------------------------------------------- | | id | string | | padding | MapPadding |

MapPadding

Controls for setting padding on the 'visible' region of the view.

| Prop | Type | | ------------ | ------------------- | | top | number | | left | number | | right | number | | bottom | number |

OnScrollArgs

| Prop | Type | | --------------- | --------------------------------------------------------------------- | | id | string | | mapBounds | { x: number; y: number; width: number; height: number; } |

LatLngBounds

An interface representing the viewports latitude and longitude bounds.

| Prop | Type | | --------------- | ----------------------------------------- | | southwest | LatLng | | center | LatLng | | northeast | LatLng |

Enums

MapType

| Members | Value | Description | | --------------- | ------------------------ | ---------------------------------------- | | Normal | 'Normal' | Basic map. | | Hybrid | 'Hybrid' | Satellite imagery with roads and labels. | | Satellite | 'Satellite' | Satellite imagery with no labels. | | Terrain | 'Terrain' | Topographic data. | | None | 'None' | No base map tiles. |