lit-google-map

2023-08-11:

• Add "map-ready" event.

2023-08-10:

• Forked from arkadiuszwojcik/lit-google-map
• Add prettier and eslint
• Audit fix
• Update default version
• Add possibility to disable default ui

Table of contents

How to use

Map element attributes

Marker element attributes

Circle shape element attributes

Polygon shape element attributes

How to build

License

How to use

Include lit-google-map bundle in HTML file:

<script src="lit-google-map.bundle.js"></script>

or its minified version:

<script src="lit-google-map.bundle.min.js"></script>

Use component in any place you want (remember to fill in Google Maps API key):

<lit-google-map api-key="YOUR_GOOGLE_MAPS_API_KEY"> </lit-google-map>

You can also include any number of map markers:

<lit-google-map api-key="YOUR_GOOGLE_MAPS_API_KEY">
  <lit-google-map-marker
    slot="markers"
    latitude="49.4404582"
    longitude="20.2700361"
  >
  </lit-google-map-marker>
  <lit-google-map-marker
    slot="markers"
    latitude="50.797444"
    longitude="20.4600623"
  >
  </lit-google-map-marker>
</lit-google-map>

or/and shapes:

<lit-google-map api-key="YOUR_GOOGLE_MAPS_API_KEY">
  <lit-google-map-circle
    slot="shapes"
    center-latitude="49.4404582"
    center-longitude="20.2700361"
  >
  </lit-google-map-circle>
</lit-google-map>

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:

<lit-google-map
  api-key="SOME_API_KEY"
  zoom="6"
  map-type="satellite"
  center-latitude="51.8436554"
  center-longitude="19.5070867"
>
</lit-google-map>

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:

<lit-google-map-marker
  slot="markers"
  latitude="49.4404582"
  longitude="20.2700361"
>
</lit-google-map-marker>

Markers can also have associated InfoWindow with html content:

<lit-google-map-marker
  slot="markers"
  latitude="50.797444"
  longitude="20.4600623"
>
  <p>Some description</p>
  <img src="some_image.jpg" alt="some image" />
</lit-google-map-marker>

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:

<lit-google-map-circle
  slot="shapes"
  center-latitude="53.176389"
  center-longitude="22.073056"
  radius="50000"
  fill-color="#7FB3D5"
  fill-opacity="0.35"
  stroke-color="#2874A6"
  stroke-opacity="0.8"
  stroke-weight="5"
>
</lit-google-map-circle>

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:

<lit-google-map-polygon
  slot="shapes"
  paths='[{"lat": 53.7332, "lng": 15.5180}, {"lat": 54.0444, "lng": 18.1379}, {"lat": 53.2028, "lng": 16.9292}, {"lat": 53.7332, "lng": 15.5180}]'
  fill-color="#7FB3D5"
  fill-opacity="0.35"
  stroke-color="#2874A6"
  stroke-opacity="0.8"
  stroke-weight="5"
>
</lit-google-map-polygon>

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