lit-google-map

This project is a fork of lit-google-map.

• add map bounds_changed and tilesloaded events from launchscout's fork
• add marker mouseover and mouseout events
• fix marker icon attribute not being updateable live
• update dependencies and keep current with Dependabot
• add omit-from-fit to markers. This lets you add more markers to display on the map that won't affect the sizing of the bounds box
• move to AdvancedMarkerElement

Table of contents

How to use

Marker element attributes

Map events

Marker events

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>

Map events

• 'bounds_changed' - Custom Event with detail attribute containing north, south, east, and west attributes
• 'tilesloaded' - Custom Event containing the same data as bounds_changed
• 'place_click' - Custom Event containing detail attribute containing placeId attribute

Marker events

• 'mouseover' - Custom Event with detail attribute containing id attribute
• 'mouseout' - Custom Event with detail attribute containing id attribute
• 'click' - Custom Event with detail attribute containing id attribute

Marker element attributes

• 'latitude' - Marker latitude position
• 'longitude' - Marker longitude position
• 'omit-from-fit' - Don't include marker when fitting map bounds to markers
• 'z-index' - Marker z index
• 'id' - Use with Marker events to identify the source
• 'glyph' - Glyph in center of pin
• 'glyphColor' - Glyph color
• 'background' - Background color of pin
• 'borderColor' - Border color of pin
• 'scale' - Scale of pin

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