npm is now a part of GitHub
❤Native Penguin Milk

npm

Sign UpSign In
Miss any of our Open RFC calls?Watch the recordings here! »

@ppci/google-maps

1.2.2 • Public • Published

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

Keywords

Install

npm i @ppci/google-maps

DownloadsWeekly Downloads

25

Version

1.2.2

License

ISC

Unpacked Size

9.65 kB

Total Files

6

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Try on RunKit
Report a vulnerability