Google Map

These modular elements can be readily used and customized in every layout across pages.

Example

To enable the map view in your component, add data-gmap="data-gmap" attribute in your HTML element. Next, generate your custom map styles in the Google Maps Platform by visiting the Map Styles section, then create a Map ID from the Map Management panel. Once, your Map ID is ready, include it in your HTML using the data-mapid="YOUR_MAP_ID" attribute. This Map ID is required to properly render Google Maps API v3 with the AdvancedMarkerElement.

Eiffel Tower

Gustave Eiffel's iconic, wrought-iron 1889 tower,
with steps and elevators to observation decks.

Html
<div class="googlemap min-vh-50" data-gmap data-latlng="48.8583701,2.2922873,17" data-scrollwheel="false" data-mapid="a2a07f618947e1cca5b1a9b0" data-icon="../../assets/img/map-marker.png" data-zoom="17" data-theme="Default">
  <div class="marker-content">
    <h5>Eiffel Tower</h5>
    <p class="mb-0">Gustave Eiffel's iconic, wrought-iron 1889 tower,<br> with steps and elevators to observation decks.</p>
  </div>
</div>

Example of street view

To enable Street View Panorama mode, simply add the data-theme="streetview" attribute to your HTML element, Additionally, to fully enable Street View functionality through the Google Maps API, make sure to include the required library streetView in the script tag when loading the Google Maps API. This ensures that the Street View components and features load correctly. 

<div class="googlemap min-vh-50" data-gmap data-latlng="48.8588723,2.2932638" data-pov='{"heading":120,"pitch":0}' data-scrollwheel="false" data-icon="../../assets/img/map-marker.png" data-zoom="1" data-theme="streetview"></div>
How to use Google Maps
  • Get your API key⟶
  • Add the script to your page
    <script>
  (g => {
    var h, a, k, p = "The Google Maps JavaScript API",
      c = "google",
      l = "importLibrary",
      q = "__ib__",
      m = document,
      b = window;
    b = b[c] || (b[c] = {});
    var d = b.maps || (b.maps = {}),
      r = new Set(),
      e = new URLSearchParams,
      u = () => h || (h = new Promise(async (f, n) => {
        await (a = m.createElement("script"));
        e.set("libraries", [...r] + "");
        for (k in g)
          e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]);
        e.set("callback", c + ".maps." + q);
        a.src = `https://maps.${c}apis.com/maps/api/js?` + e;
        d[q] = f;
        a.onerror = () => h = n(Error(p + " could not load."));
        a.nonce = m.querySelector("script[nonce]")?.nonce || "";
        m.head.append(a);
      }));
    d[l] ?
      console.warn(p + " only loads once. Ignoring:", g) :
      d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n))
  })({
    key: 'YOUR_API_KEY',
    v: "weekly",
    libraries: "marker,streetView" // Libraries to load
  });
</script>