stencil-map

Stencil Map Component

Map component based on Google Maps API 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 built using Stencil.

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:

npm install
npm start

Using this component

To build the component for production, run:

npm run build

Copy the generated dist folder to your own project and add the following script tag to your HTML:

<script src="dist/stencil-map.js"></script>

You can then use the component in your own HTML like this:

<map-component api-key="[Put Google API Key Here]" cluster="true" fit-locations="true"></map-component>

The component has the following attributes:

cluster - uses MarkerClusterer 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:

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:

const map = document.querySelector('map-component');
map.locations = locations;

TODO: Component hasn't yet been published to NPM.