@ppci/google-maps

Google Maps

Map component based on google maps api

Table of contents

1. Installation
2. Usage
3. Properties
4. Events

Installation

NPM

npm i @ppci/google-maps

// Polyfill: https://lit-element.polymer-project.org/guide/use#polyfills
npm i --save-dev @webcomponents/webcomponentsjs

Usage

Javascript

import '@ppci/google-maps';

Browser

<!-- Default -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci/google-maps/builds/index.min.js" />

<!-- Legacy -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci/google-maps/builds/legacy.min.js" />

<!-- Component -->
<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 }, }, } ```