Light Dark System

Map

<ol-map> | OlMap
Since 1.3 experimental

Google Map component wrapper.

<ol-map
  api-key="AIzaSyCIhXowoNs4K5RPnRaWw3tZWmtfd-rWe54"
  center='{"lat":41.3926679,"lng":2.1401891}'
  zoom="12"
  style="height: 300px; width: 100%;"
>
</ol-map>

import OlMap from '@onlive.site/ui/dist/react/map';

const App = () => (
  <OlMap
    api-key="AIzaSyCIhXowoNs4K5RPnRaWw3tZWmtfd-rWe54"
    center='{"lat":41.3926679,"lng":2.1401891}'
    zoom="12"
    style="height: 300px; width: 100%;"
  >
  </OlMap>
);

Examples

Customize Default UI

Use the setOptions method to modify the default options. In this example we have removed the control for the map type and the street view control. 

<ol-map
  id="example-customize"
  api-key="AIzaSyCIhXowoNs4K5RPnRaWw3tZWmtfd-rWe54"
  center='{"lat":41.3926679,"lng":2.1401891}'
  zoom="15"
  style="height: 300px; width: 100%;"
>
</ol-map>

<script>
  (async () => {
    await customElements.whenDefined('ol-map');
    const map = document.querySelector('#example-customize');
    map.setOptions({
      mapTypeControl: false,
      streetViewControl: false,
    });
  })();
</script>

Map Control

Use the setZoom and padTo methods to set the level of detail and the center of the map respectively. 


<ol-map
  id="example-control"
  api-key="AIzaSyCIhXowoNs4K5RPnRaWw3tZWmtfd-rWe54"
  center='{"lat":41.3926679,"lng":2.1401891}'
  zoom="15"
  style="height: 300px; width: 100%;"
>
</ol-map>
</br>
<ol-button id="zoom-in"><ol-icon name="zoom-in"></ol-icon></ol-button>
<ol-button id="zoom-out"><ol-icon name="zoom-out"></ol-icon></ol-button>
<ol-button id="move-left"><ol-icon name="arrow-left-short"></ol-icon></ol-button>
<ol-button id="move-up"><ol-icon name="arrow-up-short"></ol-icon></ol-button>
<ol-button id="move-right"><ol-icon name="arrow-right-short"></ol-icon></ol-button>
<ol-button id="move-bottom"><ol-icon name="arrow-down-short"></ol-icon></ol-button>

<script>
  (async () => {
    await customElements.whenDefined('ol-map');
    const map = document.querySelector('#example-control');
    let zoom = 15, center = { "lat": 41.3926679, "lng": 2.1401891 };
    const move = (lat,lng) => {
      center.lat += lat * 0.005;
      center.lng += lng * 0.005;
      map.panTo(center);
    }
    document.querySelector('#zoom-in').addEventListener('click', () => {
      map.setZoom(++zoom);
    });
    document.querySelector('#zoom-out').addEventListener('click', () => {
      map.setZoom(--zoom);
    });
    document.querySelector('#move-left').addEventListener('click', () => {
      move(0,-1);
    });
    document.querySelector('#move-up').addEventListener('click', () => {
      move(1,0);
    });
    document.querySelector('#move-right').addEventListener('click', () => {
      move(0,1);
    });
    document.querySelector('#move-bottom').addEventListener('click', () => {
      move(-1,0);
    });
  })();
</script>

Markers

Place markers on the map using the addMarkers method.

<ol-map
  id="example-markers"
  api-key="AIzaSyCIhXowoNs4K5RPnRaWw3tZWmtfd-rWe54"
  center='{"lat":41.396,"lng":2.160}'
  zoom="15"
  style="height: 300px; width: 100%;"
>
</ol-map>

<script>
  (async () => {
    await customElements.whenDefined('ol-map');
    const map = document.querySelector('#example-markers');
    map.addMarkers([
      { position: { lat: 41.39500868409968, lng: 2.157821170845245 } },
      { position: { lat: 41.39746341090834, lng: 2.164269200956342 } },
    ]);
  })();
</script>

Manage Markers

It is possible to use the removeMarker method to remove a marker from the map and updateMarker to update the position and styles of a marker.


Remove Left Marker Add Left Marker Update Right Marker Revert Right Marker 
<ol-map
  id="example-manage-markers"
  api-key="AIzaSyCIhXowoNs4K5RPnRaWw3tZWmtfd-rWe54"
  center='{"lat":41.396,"lng":2.160}'
  zoom="15"
  style="height: 300px; width: 100%;"
>
</ol-map>
</br>
<ol-button id="remove-marker">Remove Left Marker</ol-button>
<ol-button id="add-marker">Add Left Marker</ol-button>
<ol-button id="update-marker">Update Right Marker</ol-button>
<ol-button id="revert-marker">Revert Right Marker</ol-button>

<script>
  (async () => {
    await customElements.whenDefined('ol-map');
    const map = document.querySelector('#example-manage-markers');
    const leftMarker = { position: { lat: 41.39500868409968, lng: 2.157821170845245 } };
    const rightMarker = { position: { lat: 41.39746341090834, lng: 2.164269200956342 } };
    const rightMarkerUpdated = { position: { lat: 41.39746341090834, lng: 2.164269200956342 }, pin: { background: '#ca6be9', borderColor: '#9525a1', glyphColor: '#9525a1', scale: 1.5 } };
    map.addMarkers([leftMarker, rightMarker]);
    document.querySelector('#remove-marker').addEventListener('click', () => {
      map.removeMarker(leftMarker);
    });
    document.querySelector('#add-marker').addEventListener('click', () => {
      map.addMarkers([leftMarker]);
    });
    document.querySelector('#update-marker').addEventListener('click', () => {
      map.updateMarker(rightMarker, rightMarkerUpdated);
    });
    document.querySelector('#revert-marker').addEventListener('click', () => {
      map.updateMarker(rightMarkerUpdated, rightMarker);
    });
  })();
</script>

Custom Markers

Customize the marker style with the pin property. Check the documentation to see all available options. 

<ol-map
  id="example-custom-markers"
  api-key="AIzaSyCIhXowoNs4K5RPnRaWw3tZWmtfd-rWe54"
  center='{"lat":41.396,"lng":2.160}'
  zoom="13"
  style="height: 300px; width: 100%;"
>
</ol-map>

<script>
  (async () => {
    await customElements.whenDefined('ol-map');
    const svgString = '<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 250 250" xml:space="preserve"><path d="M0,28.8C41,43,81.8,58,122.9,71.9c1.5,0.6,2.9,0.6,4.3,0c41-14,81.8-28.8,122.7-43.2c-14.5,23.2-29.2,46.2-44,69.2 c-6.9-2.9-13.9-5.4-20.8-8.2c4-7,8.3-13.9,12.4-21c-13.2,6.7-26.7,12.8-39.8,19.7c9.2,3.5,18.4,6.9,27.5,10.6  c5.1,2.1,10.5,6.1,10.9,12c0.8,6.6-3.7,12-6.9,17.3c-19.8,30.9-39.4,62-59.3,92.9c0.1-8.1-0.8-16.4,0.1-24.5 c7.8-24.8,15.5-49.7,22.7-74.7c1.4-3.7-2.8-5.7-5.4-7c-7.5-3.3-14.6-7.7-22.3-10.6c-7.8,3.4-15.3,7.5-23,11.2  c-2.4,1.1-5.7,3.3-4.4,6.4c7.1,25,14.9,49.9,22.6,74.7c0.9,8.1,0,16.3,0.1,24.5c-19.6-30.6-39.1-61.3-58.6-91.9 c-3.4-5.6-8.3-11.4-7.5-18.4C54.5,105,60,101.1,65,99c9-3.7,18.2-7,27.3-10.6c-13.1-6.8-26.5-13.1-39.7-19.7c4,7,8.4,13.9,12.3,21 c-7,2.8-14,5.3-20.9,8.2C29.2,74.9,14.6,51.8,0,28.8L0,28.8z"/></svg>';
    const createSvgImage = () => {
      return new DOMParser().parseFromString(svgString, 'image/svg+xml').documentElement;
    }
    const map = document.querySelector('#example-custom-markers');
    const customPin = { background: '#264c4b', borderColor: 'transparent', glyphColor: '#fff', scale: 1.25 };
    map.addMarkers([
      { position: { lat: 41.39500868409968, lng: 2.157821170845245 }, pin: { ...customPin, glyph: createSvgImage() } },
      { position: { lat: 41.39746341090834, lng: 2.164269200956342 }, pin: { ...customPin, glyph: createSvgImage() } },
      { position: { lat: 41.39900868439968, lng: 2.177821170845245 }, pin: { ...customPin, glyph: createSvgImage() } },
      { position: { lat: 41.39346341094834, lng: 2.134269200956342 }, pin: { ...customPin, glyph: createSvgImage() } },
    ]);
  })();
</script>

Label Markers

The content property of the markers allows you to create custom content.

<ol-map
  id="example-label-markers"
  api-key="AIzaSyCIhXowoNs4K5RPnRaWw3tZWmtfd-rWe54"
  center='{"lat":41.396,"lng":2.160}'
  zoom="13"
  style="height: 300px; width: 100%;"
>
</ol-map>
<script>
  (async () => {
    await customElements.whenDefined('ol-map');
    const map = document.querySelector('#example-label-markers');
    const getLabelContent = (text) => {
      const div = document.createElement("div");
      div.style.fontWeight = '800';
      div.style.padding = '2px 4px';
      div.style.color = '#fff';
      div.style.background = '#f00';
      div.innerHTML = text;
      return div;
    }
    const getLabelWithIconContent = (text) => {
      const div = document.createElement("div");
      div.style.fontSize = '14px';
      div.style.fontWeight = '800';
      div.style.textAlign = 'center';
      div.style.padding = '2px 4px';
      div.innerHTML = `<ol-icon name="geo-alt"></ol-icon><div>${text}</div>`;
      return div;
    }
    map.addMarkers([
      { position: { lat: 41.39500868409968, lng: 2.157821170845245 }, content: getLabelContent('Marker 1') },
      { position: { lat: 41.39746341090834, lng: 2.164269200956342 }, content: getLabelWithIconContent('Marker 2') },
      { position: { lat: 41.39900868439968, lng: 2.177821170845245 }, content: getLabelWithIconContent('Marker 3') },
      { position: { lat: 41.39346341094834, lng: 2.134269200956342 }, content: getLabelContent('Marker 4') },
    ]);
  })();
</script>

Clickable Markers

Allows to capture click events on markers by setting the clickable property to true. Listen for the ol-gmp-click event to know when a marker has been clicked. You can use the metadata field to store additional information in your marker. 

<ol-map
  id="example-clickable-markers"
  api-key="AIzaSyCIhXowoNs4K5RPnRaWw3tZWmtfd-rWe54"
  center='{"lat":41.396,"lng":2.160}'
  zoom="15"
  style="height: 300px; width: 100%;"
>
</ol-map>

<script>
  (async () => {
    await customElements.whenDefined('ol-map');
    const map = document.querySelector('#example-clickable-markers');
    map.addMarkers([
      { title: 'Marker #1', position: { lat: 41.39500868409968, lng: 2.157821170845245 }, clickable: true },
      { title: 'Marker #2', position: { lat: 41.39746341090834, lng: 2.164269200956342 }, clickable: true, metadata: { foo: 'bar' } },
    ]);
    map.addEventListener('ol-gmp-click', (e) => {
      const { detail: { marker } } = e;
      alert(JSON.stringify(marker));
    });
  })();
</script>

Persistent Marker Filter

Add filters to display markers in a specific area, using the method addMarkerFilter. Markers must specify that they can be filtered using the filtrable property.

Use the getMarkers method to get the list of markers present on the map, you can add options to order or include the distance to a certain point on the map.

Use the fitBoundsToPoints method to center the map on the filtered markers.


Apply Filter Reset Filter 
<ol-map
  id="example-filtrable-markers"
  api-key="AIzaSyCIhXowoNs4K5RPnRaWw3tZWmtfd-rWe54"
  center='{"lat":41.396,"lng":2.160}'
  zoom="13"
  region="ES"
  style="height: 300px; width: 100%;"
>
</ol-map>
</br>
<ol-button id="apply-filter">Apply Filter</ol-button>
<ol-button id="reset-filter">Reset Filter</ol-button>

<script>
  (async () => {
    await customElements.whenDefined('ol-map');
    const map = document.querySelector('#example-filtrable-markers');
    map.addMarkers([
      { filtrable: true, position: { lat: 41.39500868409968, lng: 2.157821170845245 } },
      { filtrable: true, position: { lat: 41.39746341090834, lng: 2.164269200956342 } },
      { filtrable: true, position: { lat: 41.39900868439968, lng: 2.177821170845245 } },
      { filtrable: true, position: { lat: 41.39346341094834, lng: 2.134269200956342 } },
    ]);
    document.querySelector('#apply-filter').addEventListener('click', async () => {
      await map.setMarkerFilter({
        origin: {
          // address: '28012', // or address origin
          position: { lat: 41.396, lng: 2.16 }
        },
        radius: 1000 // radius in meters
      });
      const markers = await map.getMarkers({ includeDistanceTo: { position: { lat: 41.396, lng: 2.16 } } });
      await map.fitBoundsToPoints(markers.map(marker => marker.position));
      console.log(markers);
    });
    document.querySelector('#reset-filter').addEventListener('click', async () => {
      await map.resetMarkerFilters();
      const markers = await map.getMarkers({ includeDistanceTo: { postalCode: '28012' }, orderBy: 'distance' });
      await map.fitBoundsToPoints(markers.map(marker => marker.position));
      console.log(markers);
    });
  })();
</script>

Limit Markers

If you want to limit the number of markers shown on the map, you can use the limit property in the setMarkerFilter method.


Apply Filter Reset Filter 
<ol-map
  id="example-filtrable-markers-limit"
  api-key="AIzaSyCIhXowoNs4K5RPnRaWw3tZWmtfd-rWe54"
  center='{"lat":41.396,"lng":2.160}'
  zoom="13"
  region="ES"
  style="height: 300px; width: 100%;"
>
</ol-map>
</br>
<ol-button id="apply-filter-limit">Apply Filter</ol-button>
<ol-button id="reset-filter-limit">Reset Filter</ol-button>

<script>
  (async () => {
    await customElements.whenDefined('ol-map');
    const map = document.querySelector('#example-filtrable-markers-limit');
    map.addMarkers([
      { filtrable: true, position: { lat: 41.39500868409968, lng: 2.157821170845245 } },
      { filtrable: true, position: { lat: 41.39746341090834, lng: 2.164269200956342 } },
      { filtrable: true, position: { lat: 41.39900868439968, lng: 2.177821170845245 } },
      { filtrable: true, position: { lat: 41.39346341094834, lng: 2.134269200956342 } },
    ]);
    document.querySelector('#apply-filter-limit').addEventListener('click', async () => {
      await map.setMarkerFilter({
        origin: {
          position: { lat: 41.396, lng: 2.16 }
        },
        limit: 1 // maximum number of markers
      });
      const markers = await map.getMarkers({ includeDistanceTo: { position: { lat: 41.396, lng: 2.16 } } });
      await map.fitBoundsToPoints(markers.map(marker => marker.position));
      console.log(markers);
    });
    document.querySelector('#reset-filter-limit').addEventListener('click', async () => {
      await map.resetMarkerFilters();
      const markers = await map.getMarkers({ includeDistanceTo: { postalCode: '28012' }, orderBy: 'distance' });
      await map.fitBoundsToPoints(markers.map(marker => marker.position));
      console.log(markers);
    });
  })();
</script>

Get Markers Filtered

If you want to keep the markers in the map but get only a filtered list of them, add the filter parameter to the getMarkers method. Markers must specify that they can be filtered using the filtrable property.


Apply Filter Reset Filter 
<ol-map
  id="example-get-markers-filtered"
  api-key="AIzaSyCIhXowoNs4K5RPnRaWw3tZWmtfd-rWe54"
  center='{"lat":41.396,"lng":2.160}'
  zoom="13"
  region="ES"
  style="height: 300px; width: 100%;"
>
</ol-map>
</br>
<ol-button id="apply-visible-filter">Apply Filter</ol-button>
<ol-button id="reset-visible-filter">Reset Filter</ol-button>

<script>
  (async () => {
    await customElements.whenDefined('ol-map');
    const map = document.querySelector('#example-get-markers-filtered');
    map.addMarkers([
      { filtrable: true, position: { lat: 41.39500868409968, lng: 2.157821170845245 } },
      { filtrable: true, position: { lat: 41.39746341090834, lng: 2.164269200956342 } },
      { filtrable: true, position: { lat: 41.39900868439968, lng: 2.177821170845245 } },
      { filtrable: true, position: { lat: 41.39346341094834, lng: 2.134269200956342 } },
    ]);
    document.querySelector('#apply-visible-filter').addEventListener('click', async () => {
      const markers = await map.getMarkers({
        filter: {
          origin: {
            // address: '28012', // or address origin
            position: { lat: 41.396, lng: 2.16 }
          },
          radius: 1000 // radius in meters
        },
        includeDistanceTo: { position: { lat: 41.396, lng: 2.16 } }
      });
      await map.fitBoundsToPoints(markers.map(marker => marker.position));
      console.log(markers);
    });
    document.querySelector('#reset-visible-filter').addEventListener('click', async () => {
      const markers = await map.getMarkers({ includeDistanceTo: { postalCode: '28012' }, orderBy: 'distance' });
      await map.fitBoundsToPoints(markers.map(marker => marker.position));
      console.log(markers);
    });
  })();
</script>

Filter Markers by IDs

You can filter markers by their specific IDs using the ids property in the filter. This is useful when you want to show only specific markers. Markers must specify that they can be filtered using the filtrable property and have an id defined.


Show Markers 1 & 3 Show Only Marker 2 Show All Markers 
<ol-map
  id="example-filter-by-ids"
  api-key="AIzaSyCIhXowoNs4K5RPnRaWw3tZWmtfd-rWe54"
  center='{"lat":41.396,"lng":2.160}'
  zoom="13"
  style="height: 300px; width: 100%;"
>
</ol-map>
</br>
<ol-button id="show-specific-markers">Show Markers 1 & 3</ol-button>
<ol-button id="show-marker-2">Show Only Marker 2</ol-button>
<ol-button id="show-all-markers">Show All Markers</ol-button>

<script>
  (async () => {
    await customElements.whenDefined('ol-map');
    const map = document.querySelector('#example-filter-by-ids');
    map.addMarkers([
      { id: 'marker-1', filtrable: true, position: { lat: 41.39500868409968, lng: 2.157821170845245 }, pin: { background: '#ff0000', borderColor: '#cc0000', glyphColor: '#ffffff' } },
      { id: 'marker-2', filtrable: true, position: { lat: 41.39746341090834, lng: 2.164269200956342 }, pin: { background: '#00ff00', borderColor: '#00cc00', glyphColor: '#ffffff' } },
      { id: 'marker-3', filtrable: true, position: { lat: 41.39900868439968, lng: 2.177821170845245 }, pin: { background: '#0000ff', borderColor: '#0000cc', glyphColor: '#ffffff' } },
      { id: 'marker-4', filtrable: true, position: { lat: 41.39346341094834, lng: 2.134269200956342 }, pin: { background: '#ffff00', borderColor: '#cccc00', glyphColor: '#000000' } },
    ]);

    document.querySelector('#show-specific-markers').addEventListener('click', async () => {
      await map.setMarkerFilter({
        ids: ['marker-1', 'marker-3']
      });
      const markers = await map.getMarkers();
      await map.fitBoundsToPoints(markers.map(marker => marker.position));
      console.log('Showing markers:', markers.map(m => m.id));
    });

    document.querySelector('#show-marker-2').addEventListener('click', async () => {
      await map.setMarkerFilter({
        ids: ['marker-2']
      });
      const markers = await map.getMarkers();
      await map.fitBoundsToPoints(markers.map(marker => marker.position));
      console.log('Showing markers:', markers.map(m => m.id));
    });

    document.querySelector('#show-all-markers').addEventListener('click', async () => {
      await map.resetMarkerFilters();
      const markers = await map.getMarkers();
      await map.fitBoundsToPoints(markers.map(marker => marker.position));
      console.log('Showing all markers:', markers.map(m => m.id));
    });
  })();
</script>

Polygons

The addPolygon method allows to draw polygonal shapes on the map, with specific border and background color. The removePolygon method allows to remove a previously added polygon.


Add Polygon Remove Polygon 
<ol-map
  id="example-polygons"
  api-key="AIzaSyCIhXowoNs4K5RPnRaWw3tZWmtfd-rWe54"
  center='{"lat":41.396,"lng":2.160}'
  zoom="13"
  style="height: 300px; width: 100%;"
>
</ol-map>
</br>
<ol-button id="add-polygon">Add Polygon</ol-button>
<ol-button id="remove-polygon">Remove Polygon</ol-button>

<script>
  (async () => {
    await customElements.whenDefined('ol-map');
    const map = document.querySelector('#example-polygons');
    const polygon = {
      id: 'myPolygon',
      paths: [
          { lat: 41.39, lng: 2.14 },
          { lat: 41.39, lng: 2.18 },
          { lat: 41.40, lng: 2.18 },
          { lat: 41.40, lng: 2.14 },
      ],
      strokeColor: '#f00',
      strokeOpacity: 0.8,
      strokeWeight: 1,
      fillColor: '#f00',
      fillOpacity: 0.4,
    };
    await map.addPolygon(polygon);
    document.querySelector('#add-polygon').addEventListener('click', async () => {
      await map.addPolygon(polygon);
    });
    document.querySelector('#remove-polygon').addEventListener('click', async () => {
      await map.removePolygon(polygon);
    });
  })();
</script>

Circles

The addCircle method allows to draw circular shapes on the map, with specific border and background color. The removeCircle method allows to remove a previously added circle.


Add Circle Remove Circle 
<ol-map
  id="example-circles"
  api-key="AIzaSyCIhXowoNs4K5RPnRaWw3tZWmtfd-rWe54"
  center='{"lat":41.396,"lng":2.160}'
  zoom="13"
  style="height: 300px; width: 100%;"
>
</ol-map>
</br>
<ol-button id="add-circle">Add Circle</ol-button>
<ol-button id="remove-circle">Remove Circle</ol-button>

<script>
  (async () => {
    await customElements.whenDefined('ol-map');
    const map = document.querySelector('#example-circles');
    const circle = {
      id: 'myCircle',
      center: { lat: 41.395, lng: 2.16 },
      radius: 1500,
      strokeColor: '#00f',
      strokeOpacity: 0.8,
      strokeWeight: 1,
      fillColor: '#00f',
      fillOpacity: 0.4,
    };
    await map.addCircle(circle);
    document.querySelector('#add-circle').addEventListener('click', async () => {
      await map.addCircle(circle);
    });
    document.querySelector('#remove-circle').addEventListener('click', async () => {
      await map.removeCircle(circle);
    });
  })();
</script>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script Import Bundler React

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.onlive.site/@onlive.site/ui@1.8.20/cdn/components/map/map.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.onlive.site/@onlive.site/ui@1.8.20/cdn/components/map/map.js';

To import this component using a bundler:

import '@onlive.site/ui/dist/components/map/map.js';

To import this component as a React component:

import OlMap from '@onlive.site/ui/dist/react/map';

Properties

Name Description Reflects Type Default
apiKey
api-key 		A valid Google Maps Platform API key. If you don’t have one already sign up for Google Maps Platform and create an API key. You can learn more about API keys in the Google Maps Platform documentation. string | undefined -
authReferrerPolicy
auth-referrer-policy 		Maps JS customers can configure HTTP Referrer Restrictions in the Cloud Console to limit which URLs are allowed to use a particular API Key. This parameter can limit the amount of data sent to Google Maps when evaluating HTTP Referrer Restrictions. Please see the documentation for more information. string | undefined -
version The release channel or version numbers. See the documentation for more information. Note: Usage as a Web Component (e.g. using the custom <gmp-advanced-marker> HTML element, is only available in the v=beta channel). string 'beta'
language The language code; defaults to the user’s preferred language setting as specified in the browser when displaying textual information. Read more on localization. string | undefined -
geocodingLanguage
geocoding-language 		The language code; defaults to the user’s preferred language setting as specified in the browser when make a geocoding request. Read more on geocoding api. string -
region The region code to use. This alters the map’s behavior based on a given country or territory. Read more on region codes. string | undefined -
mapId
map-id 		The Map ID of the map. [See the Map ID documentation for more information] (https://developers.google.com/maps/documentation/get-map-id). string 'default'
zoom The zoom level of the map. number 10
center The center latitude/longitude of the map. google.maps.LatLngLiteral -
distanceUnit
distance-unit 		Use specific distance unit for computed distances. Default is ‘meters’. DistanceUnit -
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
ol-gmp-click onOlGmpClick Emitted on marker clicked. -

Learn more about events.

Methods

Name Description Arguments
getMap() Get Google Map instance. -
panTo() Changes the center of the map to the given LatLng. If the change is less than both the width and height of the map, the transition will be smoothly animated. center: google.maps.LatLngLiteral
setZoom() Sets the zoom of the map. zoom: number
fitBounds() Sets the viewport to contain the given bounds. bounds: google.maps.LatLngBoundsLiteral, padding: number | google.maps.Padding
fitBoundsToPoints() Sets the viewport to contain the given points inside the bounds. points: google.maps.LatLngLiteral[], padding: number | google.maps.Padding
setOptions() Sets the map options. options: SetOptions | null
getMarkers() Get a list of marker. options: GetOptions
addMarkers() Add a list of marker. markers: MapMarker[], options: AddOptions
updateMarker() Update marker. oldMarker: MapMarker, newMarker: MapMarker
removeMarker() Remove marker. marker: MapMarker
resetMarkers() Reset all markers. -
setMarkerFilter() Set a marker filter. filter: MarkerFilter
resetMarkerFilters() Reset all marker filters. -
addPolygon() Add polygon. polygon: MapPolygon
removePolygon() Remove polygon. polygon: MapPolygon
addCircle() Add circle. circle: MapCircle
removeCircle() Remove circle. circle: MapCircle

Learn more about methods.

Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.