New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@capacitor/google-maps

Package Overview
Dependencies
Maintainers
12
Versions
430
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@capacitor/google-maps - npm Package Compare versions

Comparing version 1.0.0-alpha.3.0 to 1.0.0

CHANGELOG.md

119

dist/docs.json

@@ -10,3 +10,3 @@ {

"name": "create",
"signature": "(options: CreateMapOptions, callback?: MapListenerCallback | undefined) => Promise<GoogleMap>",
"signature": "(options: CreateMapArgs, callback?: MapListenerCallback | undefined) => Promise<GoogleMap>",
"parameters": [

@@ -16,3 +16,3 @@ {

"docs": "",
"type": "CreateMapOptions"
"type": "CreateMapArgs"
},

@@ -30,3 +30,3 @@ {

"GoogleMap",
"CreateMapOptions",
"CreateMapArgs",
"MapListenerCallback"

@@ -419,4 +419,4 @@ ],

{
"name": "CreateMapOptions",
"slug": "createmapoptions",
"name": "CreateMapArgs",
"slug": "createmapargs",
"docs": "",

@@ -477,3 +477,3 @@ "tags": [],

"tags": [],
"docs": "",
"docs": "Override width for native map",
"complexTypes": [],

@@ -485,3 +485,3 @@ "type": "number | undefined"

"tags": [],
"docs": "",
"docs": "Override height for native map",
"complexTypes": [],

@@ -493,3 +493,3 @@ "type": "number | undefined"

"tags": [],
"docs": "",
"docs": "Override absolute x coordinate position for native map",
"complexTypes": [],

@@ -501,3 +501,3 @@ "type": "number | undefined"

"tags": [],
"docs": "",
"docs": "Override absolute y coordinate position for native map",
"complexTypes": [],

@@ -509,3 +509,3 @@ "type": "number | undefined"

"tags": [],
"docs": "",
"docs": "Default location on the Earth towards which the camera points.",
"complexTypes": [

@@ -519,3 +519,3 @@ "LatLng"

"tags": [],
"docs": "",
"docs": "Sets the zoom of the map.",
"complexTypes": [],

@@ -526,4 +526,9 @@ "type": "number"

"name": "androidLiteMode",
"tags": [],
"docs": "",
"tags": [
{
"text": "false",
"name": "default"
}
],
"docs": "Enables image-based lite mode on Android.",
"complexTypes": [],

@@ -537,3 +542,3 @@ "type": "boolean | undefined"

"slug": "latlng",
"docs": "",
"docs": "An interface representing a pair of latitude and longitude coordinates.",
"tags": [],

@@ -545,3 +550,3 @@ "methods": [],

"tags": [],
"docs": "",
"docs": "Coordinate latitude, in degrees. This value is in the range [-90, 90].",
"complexTypes": [],

@@ -553,3 +558,3 @@ "type": "number"

"tags": [],
"docs": "",
"docs": "Coordinate longitude, in degrees. This value is in the range [-180, 180].",
"complexTypes": [],

@@ -563,3 +568,3 @@ "type": "number"

"slug": "marker",
"docs": "",
"docs": "A marker is an icon placed at a particular point on the map's surface.",
"tags": [],

@@ -571,3 +576,3 @@ "methods": [],

"tags": [],
"docs": "",
"docs": "Marker position",
"complexTypes": [

@@ -580,4 +585,9 @@ "LatLng"

"name": "opacity",
"tags": [],
"docs": "",
"tags": [
{
"text": "1",
"name": "default"
}
],
"docs": "Sets the opacity of the marker, between 0 (completely transparent) and 1 inclusive.",
"complexTypes": [],

@@ -589,3 +599,3 @@ "type": "number | undefined"

"tags": [],
"docs": "",
"docs": "Title, a short description of the overlay.",
"complexTypes": [],

@@ -597,3 +607,3 @@ "type": "string | undefined"

"tags": [],
"docs": "",
"docs": "Snippet text, shown beneath the title in the info window when selected.",
"complexTypes": [],

@@ -604,4 +614,9 @@ "type": "string | undefined"

"name": "isFlat",
"tags": [],
"docs": "",
"tags": [
{
"text": "false",
"name": "default"
}
],
"docs": "Controls whether this marker should be flat against the Earth's surface or a billboard facing the camera.",
"complexTypes": [],

@@ -613,3 +628,3 @@ "type": "boolean | undefined"

"tags": [],
"docs": "",
"docs": "Marker icon to render.",
"complexTypes": [],

@@ -620,4 +635,9 @@ "type": "string | undefined"

"name": "draggable",
"tags": [],
"docs": "",
"tags": [
{
"text": "false",
"name": "default"
}
],
"docs": "Controls whether this marker can be dragged interactively",
"complexTypes": [],

@@ -631,3 +651,3 @@ "type": "boolean | undefined"

"slug": "cameraconfig",
"docs": "",
"docs": "Configuration properties for a Google Map Camera",
"tags": [],

@@ -639,3 +659,3 @@ "methods": [],

"tags": [],
"docs": "",
"docs": "Location on the Earth towards which the camera points.",
"complexTypes": [

@@ -649,3 +669,3 @@ "LatLng"

"tags": [],
"docs": "",
"docs": "Sets the zoom of the map.",
"complexTypes": [],

@@ -656,4 +676,9 @@ "type": "number | undefined"

"name": "bearing",
"tags": [],
"docs": "",
"tags": [
{
"text": "0",
"name": "default"
}
],
"docs": "Bearing of the camera, in degrees clockwise from true north.",
"complexTypes": [],

@@ -664,4 +689,9 @@ "type": "number | undefined"

"name": "angle",
"tags": [],
"docs": "",
"tags": [
{
"text": "0",
"name": "default"
}
],
"docs": "The angle, in degrees, of the camera from the nadir (directly facing the Earth).\n\nThe only allowed values are 0 and 45.",
"complexTypes": [],

@@ -672,4 +702,9 @@ "type": "number | undefined"

"name": "animate",
"tags": [],
"docs": "",
"tags": [
{
"text": "false",
"name": "default"
}
],
"docs": "Animate the transition to the new Camera properties.",
"complexTypes": [],

@@ -690,3 +725,3 @@ "type": "boolean | undefined"

"slug": "mappadding",
"docs": "",
"docs": "Controls for setting padding on the 'visible' region of the view.",
"tags": [],

@@ -735,3 +770,3 @@ "methods": [],

"tags": [],
"docs": ""
"docs": "Basic map."
},

@@ -742,3 +777,3 @@ {

"tags": [],
"docs": ""
"docs": "Satellite imagery with roads and labels."
},

@@ -749,3 +784,3 @@ {

"tags": [],
"docs": ""
"docs": "Satellite imagery with no labels."
},

@@ -756,3 +791,3 @@ {

"tags": [],
"docs": ""
"docs": "Topographic data."
},

@@ -763,3 +798,3 @@ {

"tags": [],
"docs": ""
"docs": "No base map tiles."
}

@@ -766,0 +801,0 @@ ]

15

dist/esm/definitions.js
export var MapType;
(function (MapType) {
/**
* Basic map.
*/
MapType["Normal"] = "Normal";
/**
* Satellite imagery with roads and labels.
*/
MapType["Hybrid"] = "Hybrid";
/**
* Satellite imagery with no labels.
*/
MapType["Satellite"] = "Satellite";
/**
* Topographic data.
*/
MapType["Terrain"] = "Terrain";
/**
* No base map tiles.
*/
MapType["None"] = "None";
})(MapType || (MapType = {}));
//# sourceMappingURL=definitions.js.map

235

dist/esm/map.js

@@ -22,2 +22,17 @@ import { Capacitor } from '@capacitor/core';

}
/**
* Creates a new instance of a Google Map
*
* @param element
* DOM element that will contain the map view and determine sizing / positioning
* @param id Unique id for the map instance
* @param apiKey
* Google Maps SDK API Key
* @param config
* Initial configuration settings for the map
* @param forceCreate
* If a map already exists with the supplied id, automatically destroy and re-create the map instance
*
* @returns GoogleMap
*/
static async create(options, callback) {

@@ -50,2 +65,7 @@ const newMap = new GoogleMap(options.id);

}
/**
* Enable marker clustering
*
* @returns void
*/
async enableClustering() {

@@ -56,2 +76,7 @@ return CapacitorGoogleMaps.enableClustering({

}
/**
* Disable marker clustering
*
* @returns void
*/
async disableClustering() {

@@ -62,2 +87,8 @@ return CapacitorGoogleMaps.disableClustering({

}
/**
* Adds a marker to the map
*
* @param marker
* @returns created marker id
*/
async addMarker(marker) {

@@ -70,2 +101,8 @@ const res = await CapacitorGoogleMaps.addMarker({

}
/**
* Adds multiple markers to the map
*
* @param markers
* @returns array of created marker IDs
*/
async addMarkers(markers) {

@@ -78,2 +115,8 @@ const res = await CapacitorGoogleMaps.addMarkers({

}
/**
* Remove marker from the map
*
* @param id id of the marker to remove from the map
* @returns
*/
async removeMarker(id) {

@@ -85,2 +128,8 @@ return CapacitorGoogleMaps.removeMarker({

}
/**
* Remove markers from the map
*
* @param ids array of ids to remove from the map
* @returns
*/
async removeMarkers(ids) {

@@ -92,2 +141,5 @@ return CapacitorGoogleMaps.removeMarkers({

}
/**
* Destroy the current instance of the map
*/
async destroy() {

@@ -102,2 +154,8 @@ if (Capacitor.getPlatform() == 'android') {

}
/**
* Update the map camera configuration
*
* @param config
* @returns
*/
async setCamera(config) {

@@ -109,2 +167,8 @@ return CapacitorGoogleMaps.setCamera({

}
/**
* Sets the type of map tiles that should be displayed.
*
* @param mapType
* @returns
*/
async setMapType(mapType) {

@@ -116,2 +180,8 @@ return CapacitorGoogleMaps.setMapType({

}
/**
* Sets whether indoor maps are shown, where available.
*
* @param enabled
* @returns
*/
async enableIndoorMaps(enabled) {

@@ -123,2 +193,8 @@ return CapacitorGoogleMaps.enableIndoorMaps({

}
/**
* Controls whether the map is drawing traffic data, if available.
*
* @param enabled
* @returns
*/
async enableTrafficLayer(enabled) {

@@ -130,2 +206,10 @@ return CapacitorGoogleMaps.enableTrafficLayer({

}
/**
* Show accessibility elements for overlay objects, such as Marker and Polyline.
*
* Only available on iOS.
*
* @param enabled
* @returns
*/
async enableAccessibilityElements(enabled) {

@@ -137,2 +221,8 @@ return CapacitorGoogleMaps.enableAccessibilityElements({

}
/**
* Set whether the My Location dot and accuracy circle is enabled.
*
* @param enabled
* @returns
*/
async enableCurrentLocation(enabled) {

@@ -144,2 +234,8 @@ return CapacitorGoogleMaps.enableCurrentLocation({

}
/**
* Set padding on the 'visible' region of the view.
*
* @param padding
* @returns
*/
async setPadding(padding) {

@@ -152,22 +248,20 @@ return CapacitorGoogleMaps.setPadding({

initScrolling() {
const parentContainer = this.findContainerElement();
if (parentContainer) {
let scrollEvent = 'scroll';
if (parentContainer.tagName.toLowerCase() == 'ion-content') {
parentContainer.scrollEvents = true;
scrollEvent = 'ionScroll';
}
window.addEventListener(scrollEvent, this.handleScrollEvent);
window.addEventListener('resize', this.handleScrollEvent);
if (screen.orientation) {
screen.orientation.addEventListener('change', () => {
setTimeout(this.updateMapBounds, 500);
});
}
else {
window.addEventListener('orientationchange', () => {
setTimeout(this.updateMapBounds, 500);
});
}
const ionContents = document.getElementsByTagName('ion-content');
// eslint-disable-next-line @typescript-eslint/prefer-for-of
for (let i = 0; i < ionContents.length; i++) {
ionContents[i].scrollEvents = true;
}
window.addEventListener('ionScroll', this.handleScrollEvent);
window.addEventListener('scroll', this.handleScrollEvent);
window.addEventListener('resize', this.handleScrollEvent);
if (screen.orientation) {
screen.orientation.addEventListener('change', () => {
setTimeout(this.updateMapBounds, 500);
});
}
else {
window.addEventListener('orientationchange', () => {
setTimeout(this.updateMapBounds, 500);
});
}
}

@@ -203,15 +297,26 @@ disableScrolling() {

}
findContainerElement() {
if (!this.element) {
return null;
/*
private findContainerElement(): HTMLElement | null {
if (!this.element) {
return null;
}
let parentElement = this.element.parentElement;
while (parentElement !== null) {
if (window.getComputedStyle(parentElement).overflowY !== 'hidden') {
return parentElement;
}
let parentElement = this.element.parentElement;
while (parentElement !== null) {
if (window.getComputedStyle(parentElement).overflowY !== 'hidden') {
return parentElement;
}
parentElement = parentElement.parentElement;
}
return null;
parentElement = parentElement.parentElement;
}
return null;
}
*/
/**
* Set the event listener on the map for 'onCameraIdle' events.
*
* @param callback
* @returns
*/
async setOnCameraIdleListener(callback) {

@@ -228,2 +333,8 @@ if (this.onCameraIdleListener) {

}
/**
* Set the event listener on the map for 'onCameraMoveStarted' events.
*
* @param callback
* @returns
*/
async setOnCameraMoveStartedListener(callback) {

@@ -240,2 +351,8 @@ if (this.onCameraMoveStartedListener) {

}
/**
* Set the event listener on the map for 'onClusterClick' events.
*
* @param callback
* @returns
*/
async setOnClusterClickListener(callback) {

@@ -252,2 +369,8 @@ if (this.onClusterClickListener) {

}
/**
* Set the event listener on the map for 'onClusterInfoWindowClick' events.
*
* @param callback
* @returns
*/
async setOnClusterInfoWindowClickListener(callback) {

@@ -264,2 +387,8 @@ if (this.onClusterInfoWindowClickListener) {

}
/**
* Set the event listener on the map for 'onInfoWindowClick' events.
*
* @param callback
* @returns
*/
async setOnInfoWindowClickListener(callback) {

@@ -276,2 +405,8 @@ if (this.onInfoWindowClickListener) {

}
/**
* Set the event listener on the map for 'onMapClick' events.
*
* @param callback
* @returns
*/
async setOnMapClickListener(callback) {

@@ -288,2 +423,8 @@ if (this.onMapClickListener) {

}
/**
* Set the event listener on the map for 'onMarkerClick' events.
*
* @param callback
* @returns
*/
async setOnMarkerClickListener(callback) {

@@ -300,2 +441,8 @@ if (this.onMarkerClickListener) {

}
/**
* Set the event listener on the map for 'onMyLocationButtonClick' events.
*
* @param callback
* @returns
*/
async setOnMyLocationButtonClickListener(callback) {

@@ -312,2 +459,8 @@ if (this.onMyLocationButtonClickListener) {

}
/**
* Set the event listener on the map for 'onMyLocationClick' events.
*
* @param callback
* @returns
*/
async setOnMyLocationClickListener(callback) {

@@ -324,10 +477,8 @@ if (this.onMyLocationClickListener) {

}
generateCallback(callback) {
const mapId = this.id;
return (data) => {
if (data.mapId == mapId) {
callback(data);
}
};
}
/**
* Remove all event listeners on the map.
*
* @param callback
* @returns
*/
async removeAllMapListeners() {

@@ -371,3 +522,11 @@ if (this.onCameraIdleListener) {

}
generateCallback(callback) {
const mapId = this.id;
return (data) => {
if (data.mapId == mapId) {
callback(data);
}
};
}
}
//# sourceMappingURL=map.js.map

235

dist/esm/web.js
import { WebPlugin } from '@capacitor/core';
import { MarkerClusterer } from '@googlemaps/markerclusterer';
export class CapacitorGoogleMapsWeb extends WebPlugin {

@@ -7,3 +8,44 @@ constructor() {

this.maps = {};
this.currMarkerId = 0;
this.onClusterClickHandler = (_, cluster, map) => {
var _a, _b;
const mapId = this.getIdFromMap(map);
const items = [];
if (cluster.markers != undefined) {
for (const marker of cluster.markers) {
const markerId = this.getIdFromMarker(mapId, marker);
items.push({
markerId: markerId,
latitude: (_a = marker.getPosition()) === null || _a === void 0 ? void 0 : _a.lat(),
longitude: (_b = marker.getPosition()) === null || _b === void 0 ? void 0 : _b.lng(),
title: marker.getTitle(),
snippet: '',
});
}
}
this.notifyListeners('onClusterClick', {
mapId: mapId,
latitude: cluster.position.lat(),
longitude: cluster.position.lng(),
size: cluster.count,
items: items,
});
};
}
getIdFromMap(map) {
for (const id in this.maps) {
if (this.maps[id].map == map) {
return id;
}
}
return '';
}
getIdFromMarker(mapId, marker) {
for (const id in this.maps[mapId].markers) {
if (this.maps[id].markers[id] == marker) {
return id;
}
}
return '';
}
async importGoogleLib(apiKey) {

@@ -22,51 +64,132 @@ if (this.gMapsRef === undefined) {

}
setCamera(_args) {
throw new Error('Method not implemented.');
async setCamera(_args) {
// Animation not supported yet...
this.maps[_args.id].map.moveCamera({
center: _args.config.coordinate,
heading: _args.config.bearing,
tilt: _args.config.angle,
zoom: _args.config.zoom,
});
}
setMapType(_args) {
throw new Error('Method not implemented.');
async setMapType(_args) {
this.maps[_args.id].map.setMapTypeId(_args.mapType);
}
enableIndoorMaps(_args) {
throw new Error('Method not implemented.');
async enableIndoorMaps(_args) {
throw new Error('Method not supported on web.');
}
enableTrafficLayer(_args) {
throw new Error('Method not implemented.');
async enableTrafficLayer(_args) {
var _a;
const trafficLayer = (_a = this.maps[_args.id].trafficLayer) !== null && _a !== void 0 ? _a : new google.maps.TrafficLayer();
if (_args.enabled) {
trafficLayer.setMap(this.maps[_args.id].map);
this.maps[_args.id].trafficLayer = trafficLayer;
}
else if (this.maps[_args.id].trafficLayer) {
trafficLayer.setMap(null);
this.maps[_args.id].trafficLayer = undefined;
}
}
enableAccessibilityElements(_args) {
throw new Error('Method not implemented.');
async enableAccessibilityElements(_args) {
throw new Error('Method not supported on web.');
}
enableCurrentLocation(_args) {
throw new Error('Method not implemented.');
async enableCurrentLocation(_args) {
if (_args.enabled) {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
const pos = {
lat: position.coords.latitude,
lng: position.coords.longitude,
};
this.maps[_args.id].map.setCenter(pos);
this.notifyListeners('onMyLocationButtonClick', {});
this.notifyListeners('onMyLocationClick', {});
}, () => {
throw new Error('Geolocation not supported on web browser.');
});
}
else {
throw new Error('Geolocation not supported on web browser.');
}
}
}
setPadding(_args) {
throw new Error('Method not implemented.');
async setPadding(_args) {
const bounds = this.maps[_args.id].map.getBounds();
if (bounds !== undefined) {
this.maps[_args.id].map.fitBounds(bounds, _args.padding);
}
}
addMarkers(_args) {
throw new Error('Method not implemented.');
async addMarkers(_args) {
const markerIds = [];
const map = this.maps[_args.id];
for (const markerArgs of _args.markers) {
const marker = new google.maps.Marker({
position: markerArgs.coordinate,
map: map.map,
opacity: markerArgs.opacity,
title: markerArgs.title,
icon: markerArgs.iconUrl,
draggable: markerArgs.draggable,
});
const id = '' + this.currMarkerId;
map.markers[id] = marker;
this.setMarkerListeners(_args.id, id, marker);
markerIds.push(id);
this.currMarkerId++;
}
return { ids: markerIds };
}
removeMarkers(_args) {
throw new Error('Method not implemented.');
async addMarker(_args) {
const marker = new google.maps.Marker({
position: _args.marker.coordinate,
map: this.maps[_args.id].map,
opacity: _args.marker.opacity,
title: _args.marker.title,
icon: _args.marker.iconUrl,
draggable: _args.marker.draggable,
});
const id = '' + this.currMarkerId;
this.maps[_args.id].markers[id] = marker;
this.setMarkerListeners(_args.id, id, marker);
this.currMarkerId++;
return { id: id };
}
enableClustering(_args) {
throw new Error('Method not implemented.');
async removeMarkers(_args) {
const map = this.maps[_args.id];
for (const id of _args.markerIds) {
map.markers[id].setMap(null);
delete map.markers[id];
}
}
disableClustering(_args) {
throw new Error('Method not implemented.');
async removeMarker(_args) {
this.maps[_args.id].markers[_args.markerId].setMap(null);
delete this.maps[_args.id].markers[_args.markerId];
}
addMarker(_args) {
throw new Error('Method not implemented.');
async enableClustering(_args) {
const markers = [];
for (const id in this.maps[_args.id].markers) {
markers.push(this.maps[_args.id].markers[id]);
}
this.maps[_args.id].markerClusterer = new MarkerClusterer({
map: this.maps[_args.id].map,
markers: markers,
onClusterClick: this.onClusterClickHandler,
});
}
removeMarker(_args) {
throw new Error('Method not implemented.');
async disableClustering(_args) {
var _a;
(_a = this.maps[_args.id].markerClusterer) === null || _a === void 0 ? void 0 : _a.setMap(null);
this.maps[_args.id].markerClusterer = undefined;
}
onScroll(_args) {
throw new Error('Method not implemented.');
async onScroll(_args) {
throw new Error('Method not supported on web.');
}
async create(options) {
console.log(`Create map: ${options.id}`);
await this.importGoogleLib(options.apiKey);
this.maps[options.id] = {
map: new window.google.maps.Map(options.element, Object.assign({}, options.config)),
element: options.element,
async create(_args) {
console.log(`Create map: ${_args.id}`);
await this.importGoogleLib(_args.apiKey);
this.maps[_args.id] = {
map: new window.google.maps.Map(_args.element, Object.assign({}, _args.config)),
element: _args.element,
markers: {},
};
this.setMapListeners(_args.id);
}

@@ -80,3 +203,47 @@ async destroy(_args) {

}
async setMarkerListeners(mapId, markerId, marker) {
marker.addListener('click', () => {
var _a, _b;
this.notifyListeners('onMarkerClick', {
mapId: mapId,
markerId: markerId,
latitude: (_a = marker.getPosition()) === null || _a === void 0 ? void 0 : _a.lat(),
longitude: (_b = marker.getPosition()) === null || _b === void 0 ? void 0 : _b.lng(),
title: marker.getTitle(),
snippet: '',
});
});
}
async setMapListeners(mapId) {
const map = this.maps[mapId].map;
map.addListener('idle', () => {
var _a, _b;
this.notifyListeners('onCameraIdle', {
mapId: mapId,
bearing: map.getHeading(),
latitude: (_a = map.getCenter()) === null || _a === void 0 ? void 0 : _a.lat(),
longitude: (_b = map.getCenter()) === null || _b === void 0 ? void 0 : _b.lng(),
tilt: map.getTilt(),
zoom: map.getZoom(),
});
});
map.addListener('center_changed', () => {
this.notifyListeners('onCameraMoveStarted', {
mapId: mapId,
isGesture: true,
});
});
map.addListener('click', (e) => {
var _a, _b;
this.notifyListeners('onMapClick', {
mapId: mapId,
latitude: (_a = e.latLng) === null || _a === void 0 ? void 0 : _a.lat(),
longitude: (_b = e.latLng) === null || _b === void 0 ? void 0 : _b.lng(),
});
});
this.notifyListeners('onMapReady', {
mapId: mapId,
});
}
}
//# sourceMappingURL=web.js.map

485

dist/plugin.cjs.js

@@ -6,2 +6,3 @@ 'use strict';

var core = require('@capacitor/core');
var markerclusterer = require('@googlemaps/markerclusterer');

@@ -28,6 +29,21 @@ function _interopNamespace(e) {

(function (MapType) {
/**
* Basic map.
*/
MapType["Normal"] = "Normal";
/**
* Satellite imagery with roads and labels.
*/
MapType["Hybrid"] = "Hybrid";
/**
* Satellite imagery with no labels.
*/
MapType["Satellite"] = "Satellite";
/**
* Topographic data.
*/
MapType["Terrain"] = "Terrain";
/**
* No base map tiles.
*/
MapType["None"] = "None";

@@ -59,2 +75,17 @@ })(exports.MapType || (exports.MapType = {}));

}
/**
* Creates a new instance of a Google Map
*
* @param element
* DOM element that will contain the map view and determine sizing / positioning
* @param id Unique id for the map instance
* @param apiKey
* Google Maps SDK API Key
* @param config
* Initial configuration settings for the map
* @param forceCreate
* If a map already exists with the supplied id, automatically destroy and re-create the map instance
*
* @returns GoogleMap
*/
static async create(options, callback) {

@@ -87,2 +118,7 @@ const newMap = new GoogleMap(options.id);

}
/**
* Enable marker clustering
*
* @returns void
*/
async enableClustering() {

@@ -93,2 +129,7 @@ return CapacitorGoogleMaps.enableClustering({

}
/**
* Disable marker clustering
*
* @returns void
*/
async disableClustering() {

@@ -99,2 +140,8 @@ return CapacitorGoogleMaps.disableClustering({

}
/**
* Adds a marker to the map
*
* @param marker
* @returns created marker id
*/
async addMarker(marker) {

@@ -107,2 +154,8 @@ const res = await CapacitorGoogleMaps.addMarker({

}
/**
* Adds multiple markers to the map
*
* @param markers
* @returns array of created marker IDs
*/
async addMarkers(markers) {

@@ -115,2 +168,8 @@ const res = await CapacitorGoogleMaps.addMarkers({

}
/**
* Remove marker from the map
*
* @param id id of the marker to remove from the map
* @returns
*/
async removeMarker(id) {

@@ -122,2 +181,8 @@ return CapacitorGoogleMaps.removeMarker({

}
/**
* Remove markers from the map
*
* @param ids array of ids to remove from the map
* @returns
*/
async removeMarkers(ids) {

@@ -129,2 +194,5 @@ return CapacitorGoogleMaps.removeMarkers({

}
/**
* Destroy the current instance of the map
*/
async destroy() {

@@ -139,2 +207,8 @@ if (core.Capacitor.getPlatform() == 'android') {

}
/**
* Update the map camera configuration
*
* @param config
* @returns
*/
async setCamera(config) {

@@ -146,2 +220,8 @@ return CapacitorGoogleMaps.setCamera({

}
/**
* Sets the type of map tiles that should be displayed.
*
* @param mapType
* @returns
*/
async setMapType(mapType) {

@@ -153,2 +233,8 @@ return CapacitorGoogleMaps.setMapType({

}
/**
* Sets whether indoor maps are shown, where available.
*
* @param enabled
* @returns
*/
async enableIndoorMaps(enabled) {

@@ -160,2 +246,8 @@ return CapacitorGoogleMaps.enableIndoorMaps({

}
/**
* Controls whether the map is drawing traffic data, if available.
*
* @param enabled
* @returns
*/
async enableTrafficLayer(enabled) {

@@ -167,2 +259,10 @@ return CapacitorGoogleMaps.enableTrafficLayer({

}
/**
* Show accessibility elements for overlay objects, such as Marker and Polyline.
*
* Only available on iOS.
*
* @param enabled
* @returns
*/
async enableAccessibilityElements(enabled) {

@@ -174,2 +274,8 @@ return CapacitorGoogleMaps.enableAccessibilityElements({

}
/**
* Set whether the My Location dot and accuracy circle is enabled.
*
* @param enabled
* @returns
*/
async enableCurrentLocation(enabled) {

@@ -181,2 +287,8 @@ return CapacitorGoogleMaps.enableCurrentLocation({

}
/**
* Set padding on the 'visible' region of the view.
*
* @param padding
* @returns
*/
async setPadding(padding) {

@@ -189,22 +301,20 @@ return CapacitorGoogleMaps.setPadding({

initScrolling() {
const parentContainer = this.findContainerElement();
if (parentContainer) {
let scrollEvent = 'scroll';
if (parentContainer.tagName.toLowerCase() == 'ion-content') {
parentContainer.scrollEvents = true;
scrollEvent = 'ionScroll';
}
window.addEventListener(scrollEvent, this.handleScrollEvent);
window.addEventListener('resize', this.handleScrollEvent);
if (screen.orientation) {
screen.orientation.addEventListener('change', () => {
setTimeout(this.updateMapBounds, 500);
});
}
else {
window.addEventListener('orientationchange', () => {
setTimeout(this.updateMapBounds, 500);
});
}
const ionContents = document.getElementsByTagName('ion-content');
// eslint-disable-next-line @typescript-eslint/prefer-for-of
for (let i = 0; i < ionContents.length; i++) {
ionContents[i].scrollEvents = true;
}
window.addEventListener('ionScroll', this.handleScrollEvent);
window.addEventListener('scroll', this.handleScrollEvent);
window.addEventListener('resize', this.handleScrollEvent);
if (screen.orientation) {
screen.orientation.addEventListener('change', () => {
setTimeout(this.updateMapBounds, 500);
});
}
else {
window.addEventListener('orientationchange', () => {
setTimeout(this.updateMapBounds, 500);
});
}
}

@@ -240,15 +350,26 @@ disableScrolling() {

}
findContainerElement() {
if (!this.element) {
return null;
/*
private findContainerElement(): HTMLElement | null {
if (!this.element) {
return null;
}
let parentElement = this.element.parentElement;
while (parentElement !== null) {
if (window.getComputedStyle(parentElement).overflowY !== 'hidden') {
return parentElement;
}
let parentElement = this.element.parentElement;
while (parentElement !== null) {
if (window.getComputedStyle(parentElement).overflowY !== 'hidden') {
return parentElement;
}
parentElement = parentElement.parentElement;
}
return null;
parentElement = parentElement.parentElement;
}
return null;
}
*/
/**
* Set the event listener on the map for 'onCameraIdle' events.
*
* @param callback
* @returns
*/
async setOnCameraIdleListener(callback) {

@@ -265,2 +386,8 @@ if (this.onCameraIdleListener) {

}
/**
* Set the event listener on the map for 'onCameraMoveStarted' events.
*
* @param callback
* @returns
*/
async setOnCameraMoveStartedListener(callback) {

@@ -277,2 +404,8 @@ if (this.onCameraMoveStartedListener) {

}
/**
* Set the event listener on the map for 'onClusterClick' events.
*
* @param callback
* @returns
*/
async setOnClusterClickListener(callback) {

@@ -289,2 +422,8 @@ if (this.onClusterClickListener) {

}
/**
* Set the event listener on the map for 'onClusterInfoWindowClick' events.
*
* @param callback
* @returns
*/
async setOnClusterInfoWindowClickListener(callback) {

@@ -301,2 +440,8 @@ if (this.onClusterInfoWindowClickListener) {

}
/**
* Set the event listener on the map for 'onInfoWindowClick' events.
*
* @param callback
* @returns
*/
async setOnInfoWindowClickListener(callback) {

@@ -313,2 +458,8 @@ if (this.onInfoWindowClickListener) {

}
/**
* Set the event listener on the map for 'onMapClick' events.
*
* @param callback
* @returns
*/
async setOnMapClickListener(callback) {

@@ -325,2 +476,8 @@ if (this.onMapClickListener) {

}
/**
* Set the event listener on the map for 'onMarkerClick' events.
*
* @param callback
* @returns
*/
async setOnMarkerClickListener(callback) {

@@ -337,2 +494,8 @@ if (this.onMarkerClickListener) {

}
/**
* Set the event listener on the map for 'onMyLocationButtonClick' events.
*
* @param callback
* @returns
*/
async setOnMyLocationButtonClickListener(callback) {

@@ -349,2 +512,8 @@ if (this.onMyLocationButtonClickListener) {

}
/**
* Set the event listener on the map for 'onMyLocationClick' events.
*
* @param callback
* @returns
*/
async setOnMyLocationClickListener(callback) {

@@ -361,10 +530,8 @@ if (this.onMyLocationClickListener) {

}
generateCallback(callback) {
const mapId = this.id;
return (data) => {
if (data.mapId == mapId) {
callback(data);
}
};
}
/**
* Remove all event listeners on the map.
*
* @param callback
* @returns
*/
async removeAllMapListeners() {

@@ -408,2 +575,10 @@ if (this.onCameraIdleListener) {

}
generateCallback(callback) {
const mapId = this.id;
return (data) => {
if (data.mapId == mapId) {
callback(data);
}
};
}
}

@@ -416,3 +591,44 @@

this.maps = {};
this.currMarkerId = 0;
this.onClusterClickHandler = (_, cluster, map) => {
var _a, _b;
const mapId = this.getIdFromMap(map);
const items = [];
if (cluster.markers != undefined) {
for (const marker of cluster.markers) {
const markerId = this.getIdFromMarker(mapId, marker);
items.push({
markerId: markerId,
latitude: (_a = marker.getPosition()) === null || _a === void 0 ? void 0 : _a.lat(),
longitude: (_b = marker.getPosition()) === null || _b === void 0 ? void 0 : _b.lng(),
title: marker.getTitle(),
snippet: '',
});
}
}
this.notifyListeners('onClusterClick', {
mapId: mapId,
latitude: cluster.position.lat(),
longitude: cluster.position.lng(),
size: cluster.count,
items: items,
});
};
}
getIdFromMap(map) {
for (const id in this.maps) {
if (this.maps[id].map == map) {
return id;
}
}
return '';
}
getIdFromMarker(mapId, marker) {
for (const id in this.maps[mapId].markers) {
if (this.maps[id].markers[id] == marker) {
return id;
}
}
return '';
}
async importGoogleLib(apiKey) {

@@ -431,51 +647,132 @@ if (this.gMapsRef === undefined) {

}
setCamera(_args) {
throw new Error('Method not implemented.');
async setCamera(_args) {
// Animation not supported yet...
this.maps[_args.id].map.moveCamera({
center: _args.config.coordinate,
heading: _args.config.bearing,
tilt: _args.config.angle,
zoom: _args.config.zoom,
});
}
setMapType(_args) {
throw new Error('Method not implemented.');
async setMapType(_args) {
this.maps[_args.id].map.setMapTypeId(_args.mapType);
}
enableIndoorMaps(_args) {
throw new Error('Method not implemented.');
async enableIndoorMaps(_args) {
throw new Error('Method not supported on web.');
}
enableTrafficLayer(_args) {
throw new Error('Method not implemented.');
async enableTrafficLayer(_args) {
var _a;
const trafficLayer = (_a = this.maps[_args.id].trafficLayer) !== null && _a !== void 0 ? _a : new google.maps.TrafficLayer();
if (_args.enabled) {
trafficLayer.setMap(this.maps[_args.id].map);
this.maps[_args.id].trafficLayer = trafficLayer;
}
else if (this.maps[_args.id].trafficLayer) {
trafficLayer.setMap(null);
this.maps[_args.id].trafficLayer = undefined;
}
}
enableAccessibilityElements(_args) {
throw new Error('Method not implemented.');
async enableAccessibilityElements(_args) {
throw new Error('Method not supported on web.');
}
enableCurrentLocation(_args) {
throw new Error('Method not implemented.');
async enableCurrentLocation(_args) {
if (_args.enabled) {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
const pos = {
lat: position.coords.latitude,
lng: position.coords.longitude,
};
this.maps[_args.id].map.setCenter(pos);
this.notifyListeners('onMyLocationButtonClick', {});
this.notifyListeners('onMyLocationClick', {});
}, () => {
throw new Error('Geolocation not supported on web browser.');
});
}
else {
throw new Error('Geolocation not supported on web browser.');
}
}
}
setPadding(_args) {
throw new Error('Method not implemented.');
async setPadding(_args) {
const bounds = this.maps[_args.id].map.getBounds();
if (bounds !== undefined) {
this.maps[_args.id].map.fitBounds(bounds, _args.padding);
}
}
addMarkers(_args) {
throw new Error('Method not implemented.');
async addMarkers(_args) {
const markerIds = [];
const map = this.maps[_args.id];
for (const markerArgs of _args.markers) {
const marker = new google.maps.Marker({
position: markerArgs.coordinate,
map: map.map,
opacity: markerArgs.opacity,
title: markerArgs.title,
icon: markerArgs.iconUrl,
draggable: markerArgs.draggable,
});
const id = '' + this.currMarkerId;
map.markers[id] = marker;
this.setMarkerListeners(_args.id, id, marker);
markerIds.push(id);
this.currMarkerId++;
}
return { ids: markerIds };
}
removeMarkers(_args) {
throw new Error('Method not implemented.');
async addMarker(_args) {
const marker = new google.maps.Marker({
position: _args.marker.coordinate,
map: this.maps[_args.id].map,
opacity: _args.marker.opacity,
title: _args.marker.title,
icon: _args.marker.iconUrl,
draggable: _args.marker.draggable,
});
const id = '' + this.currMarkerId;
this.maps[_args.id].markers[id] = marker;
this.setMarkerListeners(_args.id, id, marker);
this.currMarkerId++;
return { id: id };
}
enableClustering(_args) {
throw new Error('Method not implemented.');
async removeMarkers(_args) {
const map = this.maps[_args.id];
for (const id of _args.markerIds) {
map.markers[id].setMap(null);
delete map.markers[id];
}
}
disableClustering(_args) {
throw new Error('Method not implemented.');
async removeMarker(_args) {
this.maps[_args.id].markers[_args.markerId].setMap(null);
delete this.maps[_args.id].markers[_args.markerId];
}
addMarker(_args) {
throw new Error('Method not implemented.');
async enableClustering(_args) {
const markers = [];
for (const id in this.maps[_args.id].markers) {
markers.push(this.maps[_args.id].markers[id]);
}
this.maps[_args.id].markerClusterer = new markerclusterer.MarkerClusterer({
map: this.maps[_args.id].map,
markers: markers,
onClusterClick: this.onClusterClickHandler,
});
}
removeMarker(_args) {
throw new Error('Method not implemented.');
async disableClustering(_args) {
var _a;
(_a = this.maps[_args.id].markerClusterer) === null || _a === void 0 ? void 0 : _a.setMap(null);
this.maps[_args.id].markerClusterer = undefined;
}
onScroll(_args) {
throw new Error('Method not implemented.');
async onScroll(_args) {
throw new Error('Method not supported on web.');
}
async create(options) {
console.log(`Create map: ${options.id}`);
await this.importGoogleLib(options.apiKey);
this.maps[options.id] = {
map: new window.google.maps.Map(options.element, Object.assign({}, options.config)),
element: options.element,
async create(_args) {
console.log(`Create map: ${_args.id}`);
await this.importGoogleLib(_args.apiKey);
this.maps[_args.id] = {
map: new window.google.maps.Map(_args.element, Object.assign({}, _args.config)),
element: _args.element,
markers: {},
};
this.setMapListeners(_args.id);
}

@@ -489,2 +786,46 @@ async destroy(_args) {

}
async setMarkerListeners(mapId, markerId, marker) {
marker.addListener('click', () => {
var _a, _b;
this.notifyListeners('onMarkerClick', {
mapId: mapId,
markerId: markerId,
latitude: (_a = marker.getPosition()) === null || _a === void 0 ? void 0 : _a.lat(),
longitude: (_b = marker.getPosition()) === null || _b === void 0 ? void 0 : _b.lng(),
title: marker.getTitle(),
snippet: '',
});
});
}
async setMapListeners(mapId) {
const map = this.maps[mapId].map;
map.addListener('idle', () => {
var _a, _b;
this.notifyListeners('onCameraIdle', {
mapId: mapId,
bearing: map.getHeading(),
latitude: (_a = map.getCenter()) === null || _a === void 0 ? void 0 : _a.lat(),
longitude: (_b = map.getCenter()) === null || _b === void 0 ? void 0 : _b.lng(),
tilt: map.getTilt(),
zoom: map.getZoom(),
});
});
map.addListener('center_changed', () => {
this.notifyListeners('onCameraMoveStarted', {
mapId: mapId,
isGesture: true,
});
});
map.addListener('click', (e) => {
var _a, _b;
this.notifyListeners('onMapClick', {
mapId: mapId,
latitude: (_a = e.latLng) === null || _a === void 0 ? void 0 : _a.lat(),
longitude: (_b = e.latLng) === null || _b === void 0 ? void 0 : _b.lng(),
});
});
this.notifyListeners('onMapReady', {
mapId: mapId,
});
}
}

@@ -491,0 +832,0 @@

488

dist/plugin.js

@@ -1,2 +0,2 @@

var capacitorCapacitorGoogleMaps = (function (exports, core) {
var capacitorCapacitorGoogleMaps = (function (exports, core, markerclusterer) {
'use strict';

@@ -6,6 +6,21 @@

(function (MapType) {
/**
* Basic map.
*/
MapType["Normal"] = "Normal";
/**
* Satellite imagery with roads and labels.
*/
MapType["Hybrid"] = "Hybrid";
/**
* Satellite imagery with no labels.
*/
MapType["Satellite"] = "Satellite";
/**
* Topographic data.
*/
MapType["Terrain"] = "Terrain";
/**
* No base map tiles.
*/
MapType["None"] = "None";

@@ -37,2 +52,17 @@ })(exports.MapType || (exports.MapType = {}));

}
/**
* Creates a new instance of a Google Map
*
* @param element
* DOM element that will contain the map view and determine sizing / positioning
* @param id Unique id for the map instance
* @param apiKey
* Google Maps SDK API Key
* @param config
* Initial configuration settings for the map
* @param forceCreate
* If a map already exists with the supplied id, automatically destroy and re-create the map instance
*
* @returns GoogleMap
*/
static async create(options, callback) {

@@ -65,2 +95,7 @@ const newMap = new GoogleMap(options.id);

}
/**
* Enable marker clustering
*
* @returns void
*/
async enableClustering() {

@@ -71,2 +106,7 @@ return CapacitorGoogleMaps.enableClustering({

}
/**
* Disable marker clustering
*
* @returns void
*/
async disableClustering() {

@@ -77,2 +117,8 @@ return CapacitorGoogleMaps.disableClustering({

}
/**
* Adds a marker to the map
*
* @param marker
* @returns created marker id
*/
async addMarker(marker) {

@@ -85,2 +131,8 @@ const res = await CapacitorGoogleMaps.addMarker({

}
/**
* Adds multiple markers to the map
*
* @param markers
* @returns array of created marker IDs
*/
async addMarkers(markers) {

@@ -93,2 +145,8 @@ const res = await CapacitorGoogleMaps.addMarkers({

}
/**
* Remove marker from the map
*
* @param id id of the marker to remove from the map
* @returns
*/
async removeMarker(id) {

@@ -100,2 +158,8 @@ return CapacitorGoogleMaps.removeMarker({

}
/**
* Remove markers from the map
*
* @param ids array of ids to remove from the map
* @returns
*/
async removeMarkers(ids) {

@@ -107,2 +171,5 @@ return CapacitorGoogleMaps.removeMarkers({

}
/**
* Destroy the current instance of the map
*/
async destroy() {

@@ -117,2 +184,8 @@ if (core.Capacitor.getPlatform() == 'android') {

}
/**
* Update the map camera configuration
*
* @param config
* @returns
*/
async setCamera(config) {

@@ -124,2 +197,8 @@ return CapacitorGoogleMaps.setCamera({

}
/**
* Sets the type of map tiles that should be displayed.
*
* @param mapType
* @returns
*/
async setMapType(mapType) {

@@ -131,2 +210,8 @@ return CapacitorGoogleMaps.setMapType({

}
/**
* Sets whether indoor maps are shown, where available.
*
* @param enabled
* @returns
*/
async enableIndoorMaps(enabled) {

@@ -138,2 +223,8 @@ return CapacitorGoogleMaps.enableIndoorMaps({

}
/**
* Controls whether the map is drawing traffic data, if available.
*
* @param enabled
* @returns
*/
async enableTrafficLayer(enabled) {

@@ -145,2 +236,10 @@ return CapacitorGoogleMaps.enableTrafficLayer({

}
/**
* Show accessibility elements for overlay objects, such as Marker and Polyline.
*
* Only available on iOS.
*
* @param enabled
* @returns
*/
async enableAccessibilityElements(enabled) {

@@ -152,2 +251,8 @@ return CapacitorGoogleMaps.enableAccessibilityElements({

}
/**
* Set whether the My Location dot and accuracy circle is enabled.
*
* @param enabled
* @returns
*/
async enableCurrentLocation(enabled) {

@@ -159,2 +264,8 @@ return CapacitorGoogleMaps.enableCurrentLocation({

}
/**
* Set padding on the 'visible' region of the view.
*
* @param padding
* @returns
*/
async setPadding(padding) {

@@ -167,22 +278,20 @@ return CapacitorGoogleMaps.setPadding({

initScrolling() {
const parentContainer = this.findContainerElement();
if (parentContainer) {
let scrollEvent = 'scroll';
if (parentContainer.tagName.toLowerCase() == 'ion-content') {
parentContainer.scrollEvents = true;
scrollEvent = 'ionScroll';
}
window.addEventListener(scrollEvent, this.handleScrollEvent);
window.addEventListener('resize', this.handleScrollEvent);
if (screen.orientation) {
screen.orientation.addEventListener('change', () => {
setTimeout(this.updateMapBounds, 500);
});
}
else {
window.addEventListener('orientationchange', () => {
setTimeout(this.updateMapBounds, 500);
});
}
const ionContents = document.getElementsByTagName('ion-content');
// eslint-disable-next-line @typescript-eslint/prefer-for-of
for (let i = 0; i < ionContents.length; i++) {
ionContents[i].scrollEvents = true;
}
window.addEventListener('ionScroll', this.handleScrollEvent);
window.addEventListener('scroll', this.handleScrollEvent);
window.addEventListener('resize', this.handleScrollEvent);
if (screen.orientation) {
screen.orientation.addEventListener('change', () => {
setTimeout(this.updateMapBounds, 500);
});
}
else {
window.addEventListener('orientationchange', () => {
setTimeout(this.updateMapBounds, 500);
});
}
}

@@ -218,15 +327,26 @@ disableScrolling() {

}
findContainerElement() {
if (!this.element) {
return null;
/*
private findContainerElement(): HTMLElement | null {
if (!this.element) {
return null;
}
let parentElement = this.element.parentElement;
while (parentElement !== null) {
if (window.getComputedStyle(parentElement).overflowY !== 'hidden') {
return parentElement;
}
let parentElement = this.element.parentElement;
while (parentElement !== null) {
if (window.getComputedStyle(parentElement).overflowY !== 'hidden') {
return parentElement;
}
parentElement = parentElement.parentElement;
}
return null;
parentElement = parentElement.parentElement;
}
return null;
}
*/
/**
* Set the event listener on the map for 'onCameraIdle' events.
*
* @param callback
* @returns
*/
async setOnCameraIdleListener(callback) {

@@ -243,2 +363,8 @@ if (this.onCameraIdleListener) {

}
/**
* Set the event listener on the map for 'onCameraMoveStarted' events.
*
* @param callback
* @returns
*/
async setOnCameraMoveStartedListener(callback) {

@@ -255,2 +381,8 @@ if (this.onCameraMoveStartedListener) {

}
/**
* Set the event listener on the map for 'onClusterClick' events.
*
* @param callback
* @returns
*/
async setOnClusterClickListener(callback) {

@@ -267,2 +399,8 @@ if (this.onClusterClickListener) {

}
/**
* Set the event listener on the map for 'onClusterInfoWindowClick' events.
*
* @param callback
* @returns
*/
async setOnClusterInfoWindowClickListener(callback) {

@@ -279,2 +417,8 @@ if (this.onClusterInfoWindowClickListener) {

}
/**
* Set the event listener on the map for 'onInfoWindowClick' events.
*
* @param callback
* @returns
*/
async setOnInfoWindowClickListener(callback) {

@@ -291,2 +435,8 @@ if (this.onInfoWindowClickListener) {

}
/**
* Set the event listener on the map for 'onMapClick' events.
*
* @param callback
* @returns
*/
async setOnMapClickListener(callback) {

@@ -303,2 +453,8 @@ if (this.onMapClickListener) {

}
/**
* Set the event listener on the map for 'onMarkerClick' events.
*
* @param callback
* @returns
*/
async setOnMarkerClickListener(callback) {

@@ -315,2 +471,8 @@ if (this.onMarkerClickListener) {

}
/**
* Set the event listener on the map for 'onMyLocationButtonClick' events.
*
* @param callback
* @returns
*/
async setOnMyLocationButtonClickListener(callback) {

@@ -327,2 +489,8 @@ if (this.onMyLocationButtonClickListener) {

}
/**
* Set the event listener on the map for 'onMyLocationClick' events.
*
* @param callback
* @returns
*/
async setOnMyLocationClickListener(callback) {

@@ -339,10 +507,8 @@ if (this.onMyLocationClickListener) {

}
generateCallback(callback) {
const mapId = this.id;
return (data) => {
if (data.mapId == mapId) {
callback(data);
}
};
}
/**
* Remove all event listeners on the map.
*
* @param callback
* @returns
*/
async removeAllMapListeners() {

@@ -386,2 +552,10 @@ if (this.onCameraIdleListener) {

}
generateCallback(callback) {
const mapId = this.id;
return (data) => {
if (data.mapId == mapId) {
callback(data);
}
};
}
}

@@ -394,3 +568,44 @@

this.maps = {};
this.currMarkerId = 0;
this.onClusterClickHandler = (_, cluster, map) => {
var _a, _b;
const mapId = this.getIdFromMap(map);
const items = [];
if (cluster.markers != undefined) {
for (const marker of cluster.markers) {
const markerId = this.getIdFromMarker(mapId, marker);
items.push({
markerId: markerId,
latitude: (_a = marker.getPosition()) === null || _a === void 0 ? void 0 : _a.lat(),
longitude: (_b = marker.getPosition()) === null || _b === void 0 ? void 0 : _b.lng(),
title: marker.getTitle(),
snippet: '',
});
}
}
this.notifyListeners('onClusterClick', {
mapId: mapId,
latitude: cluster.position.lat(),
longitude: cluster.position.lng(),
size: cluster.count,
items: items,
});
};
}
getIdFromMap(map) {
for (const id in this.maps) {
if (this.maps[id].map == map) {
return id;
}
}
return '';
}
getIdFromMarker(mapId, marker) {
for (const id in this.maps[mapId].markers) {
if (this.maps[id].markers[id] == marker) {
return id;
}
}
return '';
}
async importGoogleLib(apiKey) {

@@ -409,51 +624,132 @@ if (this.gMapsRef === undefined) {

}
setCamera(_args) {
throw new Error('Method not implemented.');
async setCamera(_args) {
// Animation not supported yet...
this.maps[_args.id].map.moveCamera({
center: _args.config.coordinate,
heading: _args.config.bearing,
tilt: _args.config.angle,
zoom: _args.config.zoom,
});
}
setMapType(_args) {
throw new Error('Method not implemented.');
async setMapType(_args) {
this.maps[_args.id].map.setMapTypeId(_args.mapType);
}
enableIndoorMaps(_args) {
throw new Error('Method not implemented.');
async enableIndoorMaps(_args) {
throw new Error('Method not supported on web.');
}
enableTrafficLayer(_args) {
throw new Error('Method not implemented.');
async enableTrafficLayer(_args) {
var _a;
const trafficLayer = (_a = this.maps[_args.id].trafficLayer) !== null && _a !== void 0 ? _a : new google.maps.TrafficLayer();
if (_args.enabled) {
trafficLayer.setMap(this.maps[_args.id].map);
this.maps[_args.id].trafficLayer = trafficLayer;
}
else if (this.maps[_args.id].trafficLayer) {
trafficLayer.setMap(null);
this.maps[_args.id].trafficLayer = undefined;
}
}
enableAccessibilityElements(_args) {
throw new Error('Method not implemented.');
async enableAccessibilityElements(_args) {
throw new Error('Method not supported on web.');
}
enableCurrentLocation(_args) {
throw new Error('Method not implemented.');
async enableCurrentLocation(_args) {
if (_args.enabled) {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
const pos = {
lat: position.coords.latitude,
lng: position.coords.longitude,
};
this.maps[_args.id].map.setCenter(pos);
this.notifyListeners('onMyLocationButtonClick', {});
this.notifyListeners('onMyLocationClick', {});
}, () => {
throw new Error('Geolocation not supported on web browser.');
});
}
else {
throw new Error('Geolocation not supported on web browser.');
}
}
}
setPadding(_args) {
throw new Error('Method not implemented.');
async setPadding(_args) {
const bounds = this.maps[_args.id].map.getBounds();
if (bounds !== undefined) {
this.maps[_args.id].map.fitBounds(bounds, _args.padding);
}
}
addMarkers(_args) {
throw new Error('Method not implemented.');
async addMarkers(_args) {
const markerIds = [];
const map = this.maps[_args.id];
for (const markerArgs of _args.markers) {
const marker = new google.maps.Marker({
position: markerArgs.coordinate,
map: map.map,
opacity: markerArgs.opacity,
title: markerArgs.title,
icon: markerArgs.iconUrl,
draggable: markerArgs.draggable,
});
const id = '' + this.currMarkerId;
map.markers[id] = marker;
this.setMarkerListeners(_args.id, id, marker);
markerIds.push(id);
this.currMarkerId++;
}
return { ids: markerIds };
}
removeMarkers(_args) {
throw new Error('Method not implemented.');
async addMarker(_args) {
const marker = new google.maps.Marker({
position: _args.marker.coordinate,
map: this.maps[_args.id].map,
opacity: _args.marker.opacity,
title: _args.marker.title,
icon: _args.marker.iconUrl,
draggable: _args.marker.draggable,
});
const id = '' + this.currMarkerId;
this.maps[_args.id].markers[id] = marker;
this.setMarkerListeners(_args.id, id, marker);
this.currMarkerId++;
return { id: id };
}
enableClustering(_args) {
throw new Error('Method not implemented.');
async removeMarkers(_args) {
const map = this.maps[_args.id];
for (const id of _args.markerIds) {
map.markers[id].setMap(null);
delete map.markers[id];
}
}
disableClustering(_args) {
throw new Error('Method not implemented.');
async removeMarker(_args) {
this.maps[_args.id].markers[_args.markerId].setMap(null);
delete this.maps[_args.id].markers[_args.markerId];
}
addMarker(_args) {
throw new Error('Method not implemented.');
async enableClustering(_args) {
const markers = [];
for (const id in this.maps[_args.id].markers) {
markers.push(this.maps[_args.id].markers[id]);
}
this.maps[_args.id].markerClusterer = new markerclusterer.MarkerClusterer({
map: this.maps[_args.id].map,
markers: markers,
onClusterClick: this.onClusterClickHandler,
});
}
removeMarker(_args) {
throw new Error('Method not implemented.');
async disableClustering(_args) {
var _a;
(_a = this.maps[_args.id].markerClusterer) === null || _a === void 0 ? void 0 : _a.setMap(null);
this.maps[_args.id].markerClusterer = undefined;
}
onScroll(_args) {
throw new Error('Method not implemented.');
async onScroll(_args) {
throw new Error('Method not supported on web.');
}
async create(options) {
console.log(`Create map: ${options.id}`);
await this.importGoogleLib(options.apiKey);
this.maps[options.id] = {
map: new window.google.maps.Map(options.element, Object.assign({}, options.config)),
element: options.element,
async create(_args) {
console.log(`Create map: ${_args.id}`);
await this.importGoogleLib(_args.apiKey);
this.maps[_args.id] = {
map: new window.google.maps.Map(_args.element, Object.assign({}, _args.config)),
element: _args.element,
markers: {},
};
this.setMapListeners(_args.id);
}

@@ -467,2 +763,46 @@ async destroy(_args) {

}
async setMarkerListeners(mapId, markerId, marker) {
marker.addListener('click', () => {
var _a, _b;
this.notifyListeners('onMarkerClick', {
mapId: mapId,
markerId: markerId,
latitude: (_a = marker.getPosition()) === null || _a === void 0 ? void 0 : _a.lat(),
longitude: (_b = marker.getPosition()) === null || _b === void 0 ? void 0 : _b.lng(),
title: marker.getTitle(),
snippet: '',
});
});
}
async setMapListeners(mapId) {
const map = this.maps[mapId].map;
map.addListener('idle', () => {
var _a, _b;
this.notifyListeners('onCameraIdle', {
mapId: mapId,
bearing: map.getHeading(),
latitude: (_a = map.getCenter()) === null || _a === void 0 ? void 0 : _a.lat(),
longitude: (_b = map.getCenter()) === null || _b === void 0 ? void 0 : _b.lng(),
tilt: map.getTilt(),
zoom: map.getZoom(),
});
});
map.addListener('center_changed', () => {
this.notifyListeners('onCameraMoveStarted', {
mapId: mapId,
isGesture: true,
});
});
map.addListener('click', (e) => {
var _a, _b;
this.notifyListeners('onMapClick', {
mapId: mapId,
latitude: (_a = e.latLng) === null || _a === void 0 ? void 0 : _a.lat(),
longitude: (_b = e.latLng) === null || _b === void 0 ? void 0 : _b.lng(),
});
});
this.notifyListeners('onMapReady', {
mapId: mapId,
});
}
}

@@ -481,3 +821,3 @@

})({}, capacitorExports);
})({}, capacitorExports, markerclusterer);
//# sourceMappingURL=plugin.js.map

121

dist/typings/definitions.d.ts

@@ -0,29 +1,111 @@

/**
* An interface representing a pair of latitude and longitude coordinates.
*/
export interface LatLng {
/**
* Coordinate latitude, in degrees. This value is in the range [-90, 90].
*/
lat: number;
/**
* Coordinate longitude, in degrees. This value is in the range [-180, 180].
*/
lng: number;
}
/**
*
*/
export interface GoogleMapConfig {
/**
* Override width for native map
*/
width?: number;
/**
* Override height for native map
*/
height?: number;
/**
* Override absolute x coordinate position for native map
*/
x?: number;
/**
* Override absolute y coordinate position for native map
*/
y?: number;
/**
* Default location on the Earth towards which the camera points.
*/
center: LatLng;
/**
* Sets the zoom of the map.
*/
zoom: number;
/**
* Enables image-based lite mode on Android.
*
* @default false
*/
androidLiteMode?: boolean;
}
/**
* Configuration properties for a Google Map Camera
*/
export interface CameraConfig {
/**
* Location on the Earth towards which the camera points.
*/
coordinate?: LatLng;
/**
* Sets the zoom of the map.
*/
zoom?: number;
/**
* Bearing of the camera, in degrees clockwise from true north.
*
* @default 0
*/
bearing?: number;
/**
* The angle, in degrees, of the camera from the nadir (directly facing the Earth).
*
* The only allowed values are 0 and 45.
*
* @default 0
*/
angle?: number;
/**
* Animate the transition to the new Camera properties.
*
* @default false
*/
animate?: boolean;
/**
*
*/
animationDuration?: number;
}
export declare enum MapType {
/**
* Basic map.
*/
Normal = "Normal",
/**
* Satellite imagery with roads and labels.
*/
Hybrid = "Hybrid",
/**
* Satellite imagery with no labels.
*/
Satellite = "Satellite",
/**
* Topographic data.
*/
Terrain = "Terrain",
/**
* No base map tiles.
*/
None = "None"
}
/**
* Controls for setting padding on the 'visible' region of the view.
*/
export interface MapPadding {

@@ -35,1 +117,40 @@ top: number;

}
/**
* A marker is an icon placed at a particular point on the map's surface.
*/
export interface Marker {
/**
* Marker position
*/
coordinate: LatLng;
/**
* Sets the opacity of the marker, between 0 (completely transparent) and 1 inclusive.
*
* @default 1
*/
opacity?: number;
/**
* Title, a short description of the overlay.
*/
title?: string;
/**
* Snippet text, shown beneath the title in the info window when selected.
*/
snippet?: string;
/**
* Controls whether this marker should be flat against the Earth's surface or a billboard facing the camera.
*
* @default false
*/
isFlat?: boolean;
/**
* Marker icon to render.
*/
iconUrl?: string;
/**
* Controls whether this marker can be dragged interactively
*
* @default false
*/
draggable?: boolean;
}

7

dist/typings/implementation.d.ts
import type { PluginListenerHandle } from '@capacitor/core';
import type { CameraConfig, GoogleMapConfig, MapPadding, MapType } from './definitions';
import type { Marker } from './map';
export interface CreateMapOptions {
import type { CameraConfig, GoogleMapConfig, MapPadding, MapType, Marker } from './definitions';
export interface CreateMapArgs {
id: string;

@@ -69,3 +68,3 @@ apiKey: string;

export interface CapacitorGoogleMapsPlugin {
create(options: CreateMapOptions): Promise<void>;
create(options: CreateMapArgs): Promise<void>;
addMarker(args: AddMarkerArgs): Promise<{

@@ -72,0 +71,0 @@ id: string;

4

dist/typings/index.d.ts

@@ -1,3 +0,3 @@

import { MapType } from './definitions';
import { GoogleMap, Marker } from './map';
import { MapType, Marker } from './definitions';
import { GoogleMap } from './map';
export { GoogleMap, MapType, Marker };

@@ -4,0 +4,0 @@ declare global {

182

dist/typings/map.d.ts

@@ -1,5 +0,5 @@

import type { CameraConfig, LatLng, MapPadding, MapType } from './definitions';
import type { CreateMapOptions, MapListenerCallback } from './implementation';
import type { CameraConfig, Marker, MapPadding, MapType } from './definitions';
import type { CreateMapArgs, MapListenerCallback } from './implementation';
export interface GoogleMapInterface {
create(options: CreateMapOptions, callback?: MapListenerCallback): Promise<GoogleMap>;
create(options: CreateMapArgs, callback?: MapListenerCallback): Promise<GoogleMap>;
enableClustering(): Promise<void>;

@@ -29,11 +29,2 @@ disableClustering(): Promise<void>;

}
export interface Marker {
coordinate: LatLng;
opacity?: number;
title?: string;
snippet?: string;
isFlat?: boolean;
iconUrl?: string;
draggable?: boolean;
}
export declare class GoogleMap {

@@ -52,33 +43,188 @@ private id;

private constructor();
static create(options: CreateMapOptions, callback?: MapListenerCallback): Promise<GoogleMap>;
/**
* Creates a new instance of a Google Map
*
* @param element
* DOM element that will contain the map view and determine sizing / positioning
* @param id Unique id for the map instance
* @param apiKey
* Google Maps SDK API Key
* @param config
* Initial configuration settings for the map
* @param forceCreate
* If a map already exists with the supplied id, automatically destroy and re-create the map instance
*
* @returns GoogleMap
*/
static create(options: CreateMapArgs, callback?: MapListenerCallback): Promise<GoogleMap>;
/**
* Enable marker clustering
*
* @returns void
*/
enableClustering(): Promise<void>;
/**
* Disable marker clustering
*
* @returns void
*/
disableClustering(): Promise<void>;
/**
* Adds a marker to the map
*
* @param marker
* @returns created marker id
*/
addMarker(marker: Marker): Promise<string>;
/**
* Adds multiple markers to the map
*
* @param markers
* @returns array of created marker IDs
*/
addMarkers(markers: Marker[]): Promise<string[]>;
/**
* Remove marker from the map
*
* @param id id of the marker to remove from the map
* @returns
*/
removeMarker(id: string): Promise<void>;
/**
* Remove markers from the map
*
* @param ids array of ids to remove from the map
* @returns
*/
removeMarkers(ids: string[]): Promise<void>;
/**
* Destroy the current instance of the map
*/
destroy(): Promise<void>;
/**
* Update the map camera configuration
*
* @param config
* @returns
*/
setCamera(config: CameraConfig): Promise<void>;
/**
* Sets the type of map tiles that should be displayed.
*
* @param mapType
* @returns
*/
setMapType(mapType: MapType): Promise<void>;
/**
* Sets whether indoor maps are shown, where available.
*
* @param enabled
* @returns
*/
enableIndoorMaps(enabled: boolean): Promise<void>;
/**
* Controls whether the map is drawing traffic data, if available.
*
* @param enabled
* @returns
*/
enableTrafficLayer(enabled: boolean): Promise<void>;
/**
* Show accessibility elements for overlay objects, such as Marker and Polyline.
*
* Only available on iOS.
*
* @param enabled
* @returns
*/
enableAccessibilityElements(enabled: boolean): Promise<void>;
/**
* Set whether the My Location dot and accuracy circle is enabled.
*
* @param enabled
* @returns
*/
enableCurrentLocation(enabled: boolean): Promise<void>;
/**
* Set padding on the 'visible' region of the view.
*
* @param padding
* @returns
*/
setPadding(padding: MapPadding): Promise<void>;
private initScrolling;
private disableScrolling;
private handleScrollEvent;
initScrolling(): void;
disableScrolling(): void;
handleScrollEvent: () => void;
private updateMapBounds;
private findContainerElement;
/**
* Set the event listener on the map for 'onCameraIdle' events.
*
* @param callback
* @returns
*/
setOnCameraIdleListener(callback?: MapListenerCallback): Promise<void>;
/**
* Set the event listener on the map for 'onCameraMoveStarted' events.
*
* @param callback
* @returns
*/
setOnCameraMoveStartedListener(callback?: MapListenerCallback): Promise<void>;
/**
* Set the event listener on the map for 'onClusterClick' events.
*
* @param callback
* @returns
*/
setOnClusterClickListener(callback?: MapListenerCallback): Promise<void>;
/**
* Set the event listener on the map for 'onClusterInfoWindowClick' events.
*
* @param callback
* @returns
*/
setOnClusterInfoWindowClickListener(callback?: MapListenerCallback): Promise<void>;
/**
* Set the event listener on the map for 'onInfoWindowClick' events.
*
* @param callback
* @returns
*/
setOnInfoWindowClickListener(callback?: MapListenerCallback): Promise<void>;
/**
* Set the event listener on the map for 'onMapClick' events.
*
* @param callback
* @returns
*/
setOnMapClickListener(callback?: MapListenerCallback): Promise<void>;
/**
* Set the event listener on the map for 'onMarkerClick' events.
*
* @param callback
* @returns
*/
setOnMarkerClickListener(callback?: MapListenerCallback): Promise<void>;
/**
* Set the event listener on the map for 'onMyLocationButtonClick' events.
*
* @param callback
* @returns
*/
setOnMyLocationButtonClickListener(callback?: MapListenerCallback): Promise<void>;
/**
* Set the event listener on the map for 'onMyLocationClick' events.
*
* @param callback
* @returns
*/
setOnMyLocationClickListener(callback?: MapListenerCallback): Promise<void>;
/**
* Remove all event listeners on the map.
*
* @param callback
* @returns
*/
removeAllMapListeners(): Promise<void>;
private generateCallback;
removeAllMapListeners(): Promise<void>;
}

121

dist/typings/ts_old/definitions.d.ts

@@ -0,29 +1,111 @@

/**
* An interface representing a pair of latitude and longitude coordinates.
*/
export interface LatLng {
/**
* Coordinate latitude, in degrees. This value is in the range [-90, 90].
*/
lat: number;
/**
* Coordinate longitude, in degrees. This value is in the range [-180, 180].
*/
lng: number;
}
/**
*
*/
export interface GoogleMapConfig {
/**
* Override width for native map
*/
width?: number;
/**
* Override height for native map
*/
height?: number;
/**
* Override absolute x coordinate position for native map
*/
x?: number;
/**
* Override absolute y coordinate position for native map
*/
y?: number;
/**
* Default location on the Earth towards which the camera points.
*/
center: LatLng;
/**
* Sets the zoom of the map.
*/
zoom: number;
/**
* Enables image-based lite mode on Android.
*
* @default false
*/
androidLiteMode?: boolean;
}
/**
* Configuration properties for a Google Map Camera
*/
export interface CameraConfig {
/**
* Location on the Earth towards which the camera points.
*/
coordinate?: LatLng;
/**
* Sets the zoom of the map.
*/
zoom?: number;
/**
* Bearing of the camera, in degrees clockwise from true north.
*
* @default 0
*/
bearing?: number;
/**
* The angle, in degrees, of the camera from the nadir (directly facing the Earth).
*
* The only allowed values are 0 and 45.
*
* @default 0
*/
angle?: number;
/**
* Animate the transition to the new Camera properties.
*
* @default false
*/
animate?: boolean;
/**
*
*/
animationDuration?: number;
}
export declare enum MapType {
/**
* Basic map.
*/
Normal = "Normal",
/**
* Satellite imagery with roads and labels.
*/
Hybrid = "Hybrid",
/**
* Satellite imagery with no labels.
*/
Satellite = "Satellite",
/**
* Topographic data.
*/
Terrain = "Terrain",
/**
* No base map tiles.
*/
None = "None"
}
/**
* Controls for setting padding on the 'visible' region of the view.
*/
export interface MapPadding {

@@ -35,1 +117,40 @@ top: number;

}
/**
* A marker is an icon placed at a particular point on the map's surface.
*/
export interface Marker {
/**
* Marker position
*/
coordinate: LatLng;
/**
* Sets the opacity of the marker, between 0 (completely transparent) and 1 inclusive.
*
* @default 1
*/
opacity?: number;
/**
* Title, a short description of the overlay.
*/
title?: string;
/**
* Snippet text, shown beneath the title in the info window when selected.
*/
snippet?: string;
/**
* Controls whether this marker should be flat against the Earth's surface or a billboard facing the camera.
*
* @default false
*/
isFlat?: boolean;
/**
* Marker icon to render.
*/
iconUrl?: string;
/**
* Controls whether this marker can be dragged interactively
*
* @default false
*/
draggable?: boolean;
}

7

dist/typings/ts_old/implementation.d.ts
import { PluginListenerHandle } from '@capacitor/core';
import { CameraConfig, GoogleMapConfig, MapPadding, MapType } from './definitions';
import { Marker } from './map';
export interface CreateMapOptions {
import { CameraConfig, GoogleMapConfig, MapPadding, MapType, Marker } from './definitions';
export interface CreateMapArgs {
id: string;

@@ -69,3 +68,3 @@ apiKey: string;

export interface CapacitorGoogleMapsPlugin {
create(options: CreateMapOptions): Promise<void>;
create(options: CreateMapArgs): Promise<void>;
addMarker(args: AddMarkerArgs): Promise<{

@@ -72,0 +71,0 @@ id: string;

4

dist/typings/ts_old/index.d.ts

@@ -1,3 +0,3 @@

import { MapType } from './definitions';
import { GoogleMap, Marker } from './map';
import { MapType, Marker } from './definitions';
import { GoogleMap } from './map';
export { GoogleMap, MapType, Marker };

@@ -4,0 +4,0 @@ declare global {

182

dist/typings/ts_old/map.d.ts

@@ -1,5 +0,5 @@

import { CameraConfig, LatLng, MapPadding, MapType } from './definitions';
import { CreateMapOptions, MapListenerCallback } from './implementation';
import { CameraConfig, Marker, MapPadding, MapType } from './definitions';
import { CreateMapArgs, MapListenerCallback } from './implementation';
export interface GoogleMapInterface {
create(options: CreateMapOptions, callback?: MapListenerCallback): Promise<GoogleMap>;
create(options: CreateMapArgs, callback?: MapListenerCallback): Promise<GoogleMap>;
enableClustering(): Promise<void>;

@@ -29,11 +29,2 @@ disableClustering(): Promise<void>;

}
export interface Marker {
coordinate: LatLng;
opacity?: number;
title?: string;
snippet?: string;
isFlat?: boolean;
iconUrl?: string;
draggable?: boolean;
}
export declare class GoogleMap {

@@ -52,33 +43,188 @@ private id;

private constructor();
static create(options: CreateMapOptions, callback?: MapListenerCallback): Promise<GoogleMap>;
/**
* Creates a new instance of a Google Map
*
* @param element
* DOM element that will contain the map view and determine sizing / positioning
* @param id Unique id for the map instance
* @param apiKey
* Google Maps SDK API Key
* @param config
* Initial configuration settings for the map
* @param forceCreate
* If a map already exists with the supplied id, automatically destroy and re-create the map instance
*
* @returns GoogleMap
*/
static create(options: CreateMapArgs, callback?: MapListenerCallback): Promise<GoogleMap>;
/**
* Enable marker clustering
*
* @returns void
*/
enableClustering(): Promise<void>;
/**
* Disable marker clustering
*
* @returns void
*/
disableClustering(): Promise<void>;
/**
* Adds a marker to the map
*
* @param marker
* @returns created marker id
*/
addMarker(marker: Marker): Promise<string>;
/**
* Adds multiple markers to the map
*
* @param markers
* @returns array of created marker IDs
*/
addMarkers(markers: Marker[]): Promise<string[]>;
/**
* Remove marker from the map
*
* @param id id of the marker to remove from the map
* @returns
*/
removeMarker(id: string): Promise<void>;
/**
* Remove markers from the map
*
* @param ids array of ids to remove from the map
* @returns
*/
removeMarkers(ids: string[]): Promise<void>;
/**
* Destroy the current instance of the map
*/
destroy(): Promise<void>;
/**
* Update the map camera configuration
*
* @param config
* @returns
*/
setCamera(config: CameraConfig): Promise<void>;
/**
* Sets the type of map tiles that should be displayed.
*
* @param mapType
* @returns
*/
setMapType(mapType: MapType): Promise<void>;
/**
* Sets whether indoor maps are shown, where available.
*
* @param enabled
* @returns
*/
enableIndoorMaps(enabled: boolean): Promise<void>;
/**
* Controls whether the map is drawing traffic data, if available.
*
* @param enabled
* @returns
*/
enableTrafficLayer(enabled: boolean): Promise<void>;
/**
* Show accessibility elements for overlay objects, such as Marker and Polyline.
*
* Only available on iOS.
*
* @param enabled
* @returns
*/
enableAccessibilityElements(enabled: boolean): Promise<void>;
/**
* Set whether the My Location dot and accuracy circle is enabled.
*
* @param enabled
* @returns
*/
enableCurrentLocation(enabled: boolean): Promise<void>;
/**
* Set padding on the 'visible' region of the view.
*
* @param padding
* @returns
*/
setPadding(padding: MapPadding): Promise<void>;
private initScrolling;
private disableScrolling;
private handleScrollEvent;
initScrolling(): void;
disableScrolling(): void;
handleScrollEvent: () => void;
private updateMapBounds;
private findContainerElement;
/**
* Set the event listener on the map for 'onCameraIdle' events.
*
* @param callback
* @returns
*/
setOnCameraIdleListener(callback?: MapListenerCallback): Promise<void>;
/**
* Set the event listener on the map for 'onCameraMoveStarted' events.
*
* @param callback
* @returns
*/
setOnCameraMoveStartedListener(callback?: MapListenerCallback): Promise<void>;
/**
* Set the event listener on the map for 'onClusterClick' events.
*
* @param callback
* @returns
*/
setOnClusterClickListener(callback?: MapListenerCallback): Promise<void>;
/**
* Set the event listener on the map for 'onClusterInfoWindowClick' events.
*
* @param callback
* @returns
*/
setOnClusterInfoWindowClickListener(callback?: MapListenerCallback): Promise<void>;
/**
* Set the event listener on the map for 'onInfoWindowClick' events.
*
* @param callback
* @returns
*/
setOnInfoWindowClickListener(callback?: MapListenerCallback): Promise<void>;
/**
* Set the event listener on the map for 'onMapClick' events.
*
* @param callback
* @returns
*/
setOnMapClickListener(callback?: MapListenerCallback): Promise<void>;
/**
* Set the event listener on the map for 'onMarkerClick' events.
*
* @param callback
* @returns
*/
setOnMarkerClickListener(callback?: MapListenerCallback): Promise<void>;
/**
* Set the event listener on the map for 'onMyLocationButtonClick' events.
*
* @param callback
* @returns
*/
setOnMyLocationButtonClickListener(callback?: MapListenerCallback): Promise<void>;
/**
* Set the event listener on the map for 'onMyLocationClick' events.
*
* @param callback
* @returns
*/
setOnMyLocationClickListener(callback?: MapListenerCallback): Promise<void>;
/**
* Remove all event listeners on the map.
*
* @param callback
* @returns
*/
removeAllMapListeners(): Promise<void>;
private generateCallback;
removeAllMapListeners(): Promise<void>;
}

19

dist/typings/ts_old/web.d.ts

@@ -0,6 +1,11 @@

/// <reference types="google.maps" />
import { WebPlugin } from '@capacitor/core';
import { AccElementsArgs, AddMarkerArgs, CameraArgs, AddMarkersArgs, CapacitorGoogleMapsPlugin, CreateMapOptions, CurrentLocArgs, DestroyMapArgs, IndoorMapArgs, MapTypeArgs, PaddingArgs, RemoveMarkerArgs, TrafficLayerArgs, RemoveMarkersArgs, OnScrollArgs } from './implementation';
import { AccElementsArgs, AddMarkerArgs, CameraArgs, AddMarkersArgs, CapacitorGoogleMapsPlugin, CreateMapArgs, CurrentLocArgs, DestroyMapArgs, IndoorMapArgs, MapTypeArgs, PaddingArgs, RemoveMarkerArgs, TrafficLayerArgs, RemoveMarkersArgs, OnScrollArgs } from './implementation';
export declare class CapacitorGoogleMapsWeb extends WebPlugin implements CapacitorGoogleMapsPlugin {
private gMapsRef;
private maps;
private currMarkerId;
private onClusterClickHandler;
private getIdFromMap;
private getIdFromMarker;
private importGoogleLib;

@@ -17,3 +22,7 @@ setCamera(_args: CameraArgs): Promise<void>;

}>;
addMarker(_args: AddMarkerArgs): Promise<{
id: string;
}>;
removeMarkers(_args: RemoveMarkersArgs): Promise<void>;
removeMarker(_args: RemoveMarkerArgs): Promise<void>;
enableClustering(_args: {

@@ -25,9 +34,7 @@ id: string;

}): Promise<void>;
addMarker(_args: AddMarkerArgs): Promise<{
id: string;
}>;
removeMarker(_args: RemoveMarkerArgs): Promise<void>;
onScroll(_args: OnScrollArgs): Promise<void>;
create(options: CreateMapOptions): Promise<void>;
create(_args: CreateMapArgs): Promise<void>;
destroy(_args: DestroyMapArgs): Promise<void>;
setMarkerListeners(mapId: string, markerId: string, marker: google.maps.Marker): Promise<void>;
setMapListeners(mapId: string): Promise<void>;
}

19

dist/typings/web.d.ts

@@ -0,6 +1,11 @@

/// <reference types="google.maps" />
import { WebPlugin } from '@capacitor/core';
import type { AccElementsArgs, AddMarkerArgs, CameraArgs, AddMarkersArgs, CapacitorGoogleMapsPlugin, CreateMapOptions, CurrentLocArgs, DestroyMapArgs, IndoorMapArgs, MapTypeArgs, PaddingArgs, RemoveMarkerArgs, TrafficLayerArgs, RemoveMarkersArgs, OnScrollArgs } from './implementation';
import type { AccElementsArgs, AddMarkerArgs, CameraArgs, AddMarkersArgs, CapacitorGoogleMapsPlugin, CreateMapArgs, CurrentLocArgs, DestroyMapArgs, IndoorMapArgs, MapTypeArgs, PaddingArgs, RemoveMarkerArgs, TrafficLayerArgs, RemoveMarkersArgs, OnScrollArgs } from './implementation';
export declare class CapacitorGoogleMapsWeb extends WebPlugin implements CapacitorGoogleMapsPlugin {
private gMapsRef;
private maps;
private currMarkerId;
private onClusterClickHandler;
private getIdFromMap;
private getIdFromMarker;
private importGoogleLib;

@@ -17,3 +22,7 @@ setCamera(_args: CameraArgs): Promise<void>;

}>;
addMarker(_args: AddMarkerArgs): Promise<{
id: string;
}>;
removeMarkers(_args: RemoveMarkersArgs): Promise<void>;
removeMarker(_args: RemoveMarkerArgs): Promise<void>;
enableClustering(_args: {

@@ -25,9 +34,7 @@ id: string;

}): Promise<void>;
addMarker(_args: AddMarkerArgs): Promise<{
id: string;
}>;
removeMarker(_args: RemoveMarkerArgs): Promise<void>;
onScroll(_args: OnScrollArgs): Promise<void>;
create(options: CreateMapOptions): Promise<void>;
create(_args: CreateMapArgs): Promise<void>;
destroy(_args: DestroyMapArgs): Promise<void>;
setMarkerListeners(mapId: string, markerId: string, marker: google.maps.Marker): Promise<void>;
setMapListeners(mapId: string): Promise<void>;
}

6

package.json
{
"name": "@capacitor/google-maps",
"version": "1.0.0-alpha.3.0",
"version": "1.0.0",
"description": "Google maps on Capacitor",

@@ -67,2 +67,3 @@ "main": "dist/plugin.cjs.js",

"@types/google.maps": "^3.48.1",
"@types/supercluster": "^7.1.0",
"downlevel-dts": "^0.7.0",

@@ -97,4 +98,5 @@ "eslint": "^7.11.0",

"dependencies": {
"@googlemaps/js-api-loader": "^1.13.7"
"@googlemaps/js-api-loader": "^1.13.7",
"@googlemaps/markerclusterer": "^2.0.4"
}
}

330

README.md

@@ -12,2 +12,244 @@ # @capacitor/google-maps

## API Keys
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](https://console.cloud.google.com). 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](https://developers.google.com/maps/documentation/android-sdk/overview) for each platform.
## iOS
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`:
- `NSLocationAlwaysUsageDescription` (`Privacy - Location Always Usage Description`)
- `NSLocationWhenInUseUsageDescription` (`Privacy - Location When In Use Usage Description`)
Read about [Configuring `Info.plist`](https://capacitorjs.com/docs/ios/configuration#configuring-infoplist) in the [iOS Guide](https://capacitorjs.com/docs/ios) for more information on setting iOS permissions in Xcode.
> The Google Maps SDK currently does not support running on simulators using the new M1-based Macbooks. This is a [known and acknowledged issue](https://developers.google.com/maps/faq#arm-based-macs) 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.
## Android
The Google Maps SDK for Android requires you to add your API key to the AndroidManifest.xml file in your project.
```xml
<meta-data android:name="com.google.android.geo.API_KEY" android:value="YOUR_API_KEY_HERE"/>
```
To use certain location features, the SDK requires the following permissions to also be added to your AndroidManifest.xml:
```xml
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
```
## Usage
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.
>
> ```typescript
> import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
>
> @NgModule({
> schemas: [CUSTOM_ELEMENTS_SCHEMA]
> })
> ```
Include this component in your HTML and assign it an ID so that you can easily query for that element reference later.
```html
<capacitor-google-map id="map"></capacitor-google-map>
```
> 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.
```css
capacitor-google-map {
display: inline-block;
width: 275px;
height: 400px;
}
```
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.
```typescript
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.
```typescript
const newMap = await GoogleMap.create({...});
// Add a marker to the map
const markerId = await newMap.addMarker({
coordinate: {
lat: 33.6,
lng: -117.9
}
});
// Move the map programmatically
await newMap.setCamera({
coordinate: {
lat: 33.6,
lng: -117.9
}
});
// Enable marker clustering
await newMap.enableClustering();
// Handle marker click
await newMap.setOnMarkerClickListener((event) => {...});
// Clean up map reference
await newMap.destroy();
```
## Full Examples
### Angular
```typescript
import { GoogleMap } from '@capacitor/google-maps';
@Component({
template: `
<capacitor-google-maps #map></capacitor-google-maps>
<button (click)="createMap()">Create Map</button>
`,
styles: [
`
capacitor-google-maps {
display: inline-block;
width: 275px;
height: 400px;
}
`,
],
})
export class MyMap {
@ViewChild('map')
mapRef: ElementRef<HTMLElement>;
newMap: GoogleMap;
async createMap() {
this.newMap = await GoogleMap.create({
id: 'my-cool-map',
element: this.mapRef.nativeElement,
apiKey: environment.apiKey,
config: {
center: {
lat: 33.6,
lng: -117.9,
},
zoom: 8,
},
});
}
}
```
### React
```jsx
import { GoogleMap } from '@capacitor/google-maps';
const MyMap: React.FC = () => {
const mapRef = useRef<HTMLElement>();
let newMap: GoogleMap;
async function createMap() {
if (!mapRef.current) return;
newMap = await GoogleMap.create({
id: 'my-cool-map',
element: mapRef.current,
apiKey: process.env.REACT_APP_YOUR_API_KEY_HERE,
config: {
center: {
lat: 33.6,
lng: -117.9
},
zoom: 8
}
})
}
return (
<div class="component-wrapper">
<capacitor-google-map ref={mapRef} style={{
display: 'inline-block',
width: 275,
height: 400
}}></capacitor-google-map>
<button onClick={createMap}>Create Map</button>
</div>
)
}
export default MyMap;
```
### Javascript
```html
<capacitor-google-map id="map"></capacitor-google-map>
<button onclick="createMap()">Create Map</button>
<style>
capacitor-google-map {
display: inline-block;
width: 275px;
height: 400px;
}
</style>
<script>
import { GoogleMap } from '@capacitor/google-maps';
const createMap = async () => {
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: '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>
```
## API

@@ -53,3 +295,3 @@

```typescript
create(options: CreateMapOptions, callback?: MapListenerCallback | undefined) => Promise<GoogleMap>
create(options: CreateMapArgs, callback?: MapListenerCallback | undefined) => Promise<GoogleMap>
```

@@ -59,3 +301,3 @@

| -------------- | ------------------------------------------------------------------- |
| **`options`** | <code><a href="#createmapoptions">CreateMapOptions</a></code> |
| **`options`** | <code><a href="#createmapargs">CreateMapArgs</a></code> |
| **`callback`** | <code><a href="#maplistenercallback">MapListenerCallback</a></code> |

@@ -362,3 +604,3 @@

#### CreateMapOptions
#### CreateMapArgs

@@ -376,11 +618,11 @@ | Prop | Type |

| Prop | Type |
| --------------------- | ----------------------------------------- |
| **`width`** | <code>number</code> |
| **`height`** | <code>number</code> |
| **`x`** | <code>number</code> |
| **`y`** | <code>number</code> |
| **`center`** | <code><a href="#latlng">LatLng</a></code> |
| **`zoom`** | <code>number</code> |
| **`androidLiteMode`** | <code>boolean</code> |
| Prop | Type | Description | Default |
| --------------------- | ----------------------------------------- | -------------------------------------------------------------- | ------------------ |
| **`width`** | <code>number</code> | Override width for native map | |
| **`height`** | <code>number</code> | Override height for native map | |
| **`x`** | <code>number</code> | Override absolute x coordinate position for native map | |
| **`y`** | <code>number</code> | Override absolute y coordinate position for native map | |
| **`center`** | <code><a href="#latlng">LatLng</a></code> | Default location on the Earth towards which the camera points. | |
| **`zoom`** | <code>number</code> | Sets the zoom of the map. | |
| **`androidLiteMode`** | <code>boolean</code> | Enables image-based lite mode on Android. | <code>false</code> |

@@ -390,35 +632,43 @@

| Prop | Type |
| --------- | ------------------- |
| **`lat`** | <code>number</code> |
| **`lng`** | <code>number</code> |
An interface representing a pair of latitude and longitude coordinates.
| Prop | Type | Description |
| --------- | ------------------- | ------------------------------------------------------------------------- |
| **`lat`** | <code>number</code> | Coordinate latitude, in degrees. This value is in the range [-90, 90]. |
| **`lng`** | <code>number</code> | Coordinate longitude, in degrees. This value is in the range [-180, 180]. |
#### Marker
| Prop | Type |
| ---------------- | ----------------------------------------- |
| **`coordinate`** | <code><a href="#latlng">LatLng</a></code> |
| **`opacity`** | <code>number</code> |
| **`title`** | <code>string</code> |
| **`snippet`** | <code>string</code> |
| **`isFlat`** | <code>boolean</code> |
| **`iconUrl`** | <code>string</code> |
| **`draggable`** | <code>boolean</code> |
A marker is an icon placed at a particular point on the map's surface.
| Prop | Type | Description | Default |
| ---------------- | ----------------------------------------- | --------------------------------------------------------------------------------------------------------- | ------------------ |
| **`coordinate`** | <code><a href="#latlng">LatLng</a></code> | <a href="#marker">Marker</a> position | |
| **`opacity`** | <code>number</code> | Sets the opacity of the marker, between 0 (completely transparent) and 1 inclusive. | <code>1</code> |
| **`title`** | <code>string</code> | Title, a short description of the overlay. | |
| **`snippet`** | <code>string</code> | Snippet text, shown beneath the title in the info window when selected. | |
| **`isFlat`** | <code>boolean</code> | Controls whether this marker should be flat against the Earth's surface or a billboard facing the camera. | <code>false</code> |
| **`iconUrl`** | <code>string</code> | <a href="#marker">Marker</a> icon to render. | |
| **`draggable`** | <code>boolean</code> | Controls whether this marker can be dragged interactively | <code>false</code> |
#### CameraConfig
| Prop | Type |
| ----------------------- | ----------------------------------------- |
| **`coordinate`** | <code><a href="#latlng">LatLng</a></code> |
| **`zoom`** | <code>number</code> |
| **`bearing`** | <code>number</code> |
| **`angle`** | <code>number</code> |
| **`animate`** | <code>boolean</code> |
| **`animationDuration`** | <code>number</code> |
Configuration properties for a Google Map Camera
| Prop | Type | Description | Default |
| ----------------------- | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------ |
| **`coordinate`** | <code><a href="#latlng">LatLng</a></code> | Location on the Earth towards which the camera points. | |
| **`zoom`** | <code>number</code> | Sets the zoom of the map. | |
| **`bearing`** | <code>number</code> | Bearing of the camera, in degrees clockwise from true north. | <code>0</code> |
| **`angle`** | <code>number</code> | The angle, in degrees, of the camera from the nadir (directly facing the Earth). The only allowed values are 0 and 45. | <code>0</code> |
| **`animate`** | <code>boolean</code> | Animate the transition to the new Camera properties. | <code>false</code> |
| **`animationDuration`** | <code>number</code> | | |
#### MapPadding
Controls for setting padding on the 'visible' region of the view.
| Prop | Type |

@@ -445,10 +695,10 @@ | ------------ | ------------------- |

| Members | Value |
| --------------- | ------------------------ |
| **`Normal`** | <code>'Normal'</code> |
| **`Hybrid`** | <code>'Hybrid'</code> |
| **`Satellite`** | <code>'Satellite'</code> |
| **`Terrain`** | <code>'Terrain'</code> |
| **`None`** | <code>'None'</code> |
| Members | Value | Description |
| --------------- | ------------------------ | ---------------------------------------- |
| **`Normal`** | <code>'Normal'</code> | Basic map. |
| **`Hybrid`** | <code>'Hybrid'</code> | Satellite imagery with roads and labels. |
| **`Satellite`** | <code>'Satellite'</code> | Satellite imagery with no labels. |
| **`Terrain`** | <code>'Terrain'</code> | Topographic data. |
| **`None`** | <code>'None'</code> | No base map tiles. |
</docgen-api>
dist/esm/definitions.js.map

Sorry, the diff of this file is not supported yet

dist/esm/implementation.js.map

Sorry, the diff of this file is not supported yet

dist/esm/index.js.map

Sorry, the diff of this file is not supported yet

dist/esm/map.js.map

Sorry, the diff of this file is not supported yet

dist/esm/web.js.map

Sorry, the diff of this file is not supported yet

dist/plugin.cjs.js.map

Sorry, the diff of this file is not supported yet

dist/plugin.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc