https://github.com/marcusschiesser/stencil-map
Google Maps API as a web component. Built using stencil.
https://github.com/marcusschiesser/stencil-map
component google maps stenciljs webcomponent webcomponents
Last synced: about 2 months ago
JSON representation
Google Maps API as a web component. Built using stencil.
- Host: GitHub
- URL: https://github.com/marcusschiesser/stencil-map
- Owner: marcusschiesser
- License: mit
- Created: 2019-06-08T10:53:41.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-06-08T10:54:17.000Z (about 7 years ago)
- Last Synced: 2025-04-03T16:14:58.879Z (about 1 year ago)
- Topics: component, google, maps, stenciljs, webcomponent, webcomponents
- Language: TypeScript
- Size: 6.84 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Stencil Map Component
Map component based on [Google Maps API](https://developers.google.com/maps/documentation/javascript/tutorial)
that you can reuse in your web projects - works in any major framework or with no framework at all.
Technically it's a [web component](https://www.webcomponents.org/) built using [Stencil](https://stenciljs.com/).
## Getting Started
To use the component, you first need a Google API key, you can get it from here:
https://console.cloud.google.com/google/maps-apis
Then you can test the component by adding the API key to the demo code found at `src/index.html` and run:
```bash
npm install
npm start
```
## Using this component
To build the component for production, run:
```bash
npm run build
```
Copy the generated `dist` folder to your own project and add the following `script` tag to your HTML:
```html
```
You can then use the component in your own HTML like this:
```html
```
The component has the following attributes:
`cluster` - uses [MarkerClusterer](https://developers.google.com/maps/documentation/javascript/marker-clustering) to cluster locations
`fit-locations` - if true, centers the map to the boundary of all locations
A location must be a Javascript object implementing this interface:
```typescript
interface Location {
name: string;
lat: number;
lng: number;
}
```
If you have an array of locations, you can set them by changing the `locations` property of the
component:
```javascript
const map = document.querySelector('map-component');
map.locations = locations;
```
**TODO**: Component hasn't yet been [published to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages).