Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/arkadiuszwojcik/lit-google-map
This project is port of google-map webcomponent based on LitElement library
https://github.com/arkadiuszwojcik/lit-google-map
google-maps javascript litelement webcomponent
Last synced: 4 months ago
JSON representation
This project is port of google-map webcomponent based on LitElement library
- Host: GitHub
- URL: https://github.com/arkadiuszwojcik/lit-google-map
- Owner: arkadiuszwojcik
- License: mit
- Created: 2020-01-29T22:03:44.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-09-24T10:48:27.000Z (4 months ago)
- Last Synced: 2024-10-01T03:03:10.503Z (4 months ago)
- Topics: google-maps, javascript, litelement, webcomponent
- Language: TypeScript
- Size: 98.6 KB
- Stars: 8
- Watchers: 1
- Forks: 10
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# lit-google-map
This project is port of [google-map](https://www.webcomponents.org/element/GoogleWebComponents/google-map) webcomponent based on [Lit v2](https://lit.dev/) library.
UPDATE v1.0.0 (23/02/2022)
- Project ported to [Lit v2](https://lit.dev/)
- Added shapes: Circle and Polygon
- Bug fixes
## Table of contents
[How to use](#How-to-use)
[Map element attributes](#Map-element-attributes)
[Marker element attributes](#Marker-element-attributes)
[Circle shape element attributes](#Circle-shape-element-attributes)
[Polygon shape element attributes](#Polygon-shape-element-attributes)
[How to build](#How-to-build)
[License](#License)
## How to use
Include lit-google-map bundle in HTML file:
```html
```
or its minified version:
```html
```
Use component in any place you want (remember to fill in Google Maps API key):
```html
```
You can also include any number of map markers:
```html
```
or/and shapes:
```html
```
## Map element attributes
* '*api-key*' - Google map API key
* '*language*' - Google map language (optional)
* '*map-id*' - Google map mapId (optional)
* '*version*' - Google map js script version to load (default: '3.48')
* '*styles*' - Map styles in json format (optional)
* '*zoom*' - Zoom level (default: '8')
* '*fit-to-markers*' - Fit map area to display all markers
* '*map-type*' - Map type to display: 'roadmap', 'satellite', 'hybrid', 'terrain'
* '*center-latitude*'- Latitude of map initial center point
* '*center-longitude*' - Longitude of map initial center point
Example:
```html
```
## Marker element attributes
* '*latitude*' - Marker latitude position
* '*longitude*' - Marker longitude position
* '*label*' - Marker label
* '*z-index*' - Marker z index
* '*icon*' - Marker icon image url
Example:
```html
```
Markers can also have associated InfoWindow with html content:
```html
Some description
```
## Circle shape element attributes
* '*center-latitude*' - Circle center latitude position
* '*center-longitude*' - Circle center longitude position
* '*radius*' - Circle radius (default: 100000)
* '*fill-color*' - Circle fill color
* '*fill-opacity*' - Circle fill opacity
* '*stroke-color*' - Circle stroke color
* '*stroke-opacity*' - Circle stroke opacity
* '*stroke-weight*' - Circle stroke weight
Example:
```html
```
## Polygon shape element attributes
* '*paths*' - Polygon paths points in form of json array
* '*fill-color*' - Polygon fill color
* '*fill-opacity*' - Polygon fill opacity
* '*stroke-color*' - Polygon stroke color
* '*stroke-opacity*' - Polygon stroke opacity
* '*stroke-weight*' - Polygon stroke weight
Example:
```html
```
## How to build
Before build install all required packages:
```
npm install
```
Bare build:
```
npm run build
```
Build with bundle step:
```
npm run bundle
```
## License
MIT