capacitor-custom-google-maps

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.

# capacitor-custom-google-maps