Google Maps
Map component based on google maps api
Table of contents
-
Installation
-
Usage
-
Properties
-
Events
Installation
NPM
npm i @ppci-mock/google-maps
npm i --save-dev @webcomponents/webcomponentsjs
Usage
Javascript
import '@ppci-mock/google-maps';
Browser
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci-mock/google-maps/builds/index.min.js" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci-mock/google-maps/builds/legacy.min.js" />
<google-maps
apiKey=${String}
.pins=${Array}
@onLoad=${Function}
@onZoomEnd=${Function}
@onDragEnd=${Function}
></google-maps>
Properties
Property | Type | Description | Possible Values |
apiKey | String | Google maps api key | |
pins | Array | Categories you can filter on |
```
[{
label: String,
position: {
lat: Coordinate,
lng: Coordinate,
},
onClick: Function,
increaseZoom: Number,
}]
```
|
Events
Name | Description | Payload |
@onLoad | On map ready |
```
{
...,
detail: {
zoom: Number,
topRight: { lat: Coordinate, lng: Coordinate },
bottomLeft: { lat: Coordinate, lng: Coordinate },
},
}
```
|
@onZoomEnd | On zooming finished |
```
{
...,
detail: {
zoom: Number,
topRight: { lat: Coordinate, lng: Coordinate },
bottomLeft: { lat: Coordinate, lng: Coordinate },
},
}
```
|
@onDragEnd | On dragging finished |
```
{
...,
detail: {
zoom: Number,
topRight: { lat: Coordinate, lng: Coordinate },
bottomLeft: { lat: Coordinate, lng: Coordinate },
},
}
```
|