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 zoom_changed, center_changed, and view_changed events
• move to AdvancedMarkerElement
• add location button control for centering map on user's current location

Table of contents

How to use

Marker element attributes

Map events

Marker events

Circle shape element attributes

Polygon shape element attributes

Location button control

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
• 'center_changed' - Custom Event with detail attribute containing lat and lng attributes
• 'zoom_changed' - Custom Event with detail attribute containing zoom attribute
• 'view_changed' - Custom Event with detail attribute containing center (with lat and lng) and zoom attributes. Fires whenever either center or zoom changes
• '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
• '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>

Location button control

The location button control adds a native-looking button to the map that centers the map on the user's current location using the browser's Geolocation API.

Note: Geolocation requires HTTPS (or localhost for development).

Location button attributes

• 'position' - Control position on map (default: 'RIGHT_BOTTOM')
  • Valid values: 'TOP_LEFT', 'TOP_CENTER', 'TOP_RIGHT', 'LEFT_TOP', 'LEFT_CENTER', 'LEFT_BOTTOM', 'RIGHT_TOP', 'RIGHT_CENTER', 'RIGHT_BOTTOM', 'BOTTOM_LEFT', 'BOTTOM_CENTER', 'BOTTOM_RIGHT'
• 'label' - Accessible label for screen readers (default: 'My Location')
• 'disabled' - Disable the button (default: false)

Location button events

• 'location-requested' - Fired when button is clicked and location request begins
• 'location-found' - Fired when location is successfully obtained
  • Detail: {lat: number, lng: number}
• 'location-error' - Fired when geolocation fails
  • Detail: {code: number, message: string}

Example

Basic usage:

<lit-google-map api-key="YOUR_GOOGLE_MAPS_API_KEY">
  <lit-google-map-location-button slot="controls">
  </lit-google-map-location-button>
</lit-google-map>

With custom position:

<lit-google-map api-key="YOUR_GOOGLE_MAPS_API_KEY">
  <lit-google-map-location-button
    slot="controls"
    position="TOP_RIGHT"
    label="Find Me"
  >
  </lit-google-map-location-button>
</lit-google-map>

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