### Google Map

Falcon uses Google map with Snazzy Maps, with different color schemes aimed towards web designers and developers.

##### Example

##### Eiffel Tower

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

    <div class="googlemap min-vh-50" data-mapid="a2a07f618947e1cca5b1a9b0" data-latlng="48.8583701,2.2922873,17" data-scrollwheel="false" data-icon="../../assets/img/icons/map-marker.png" data-zoom="17">
      <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

    <div class="googlemap min-vh-50" data-latlng="43.0795932,-79.0776385" data-pov='{"heading":180,"pitch":-30}' data-scrollwheel="false" data-icon="../../assets/img/icons/map-marker.png" data-zoom="1" data-theme="streetview"></div>

##### How to use Google Maps

See the migration guide in 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>

- Generate your custom map styles in the Google Maps Platform, and create a Map ID from the Map Management section. Then, include that Map ID in your HTML using `data-mapid` to render the Google Maps API v3 with the `AdvancedMarkerElement`.

      <div class="googlemap min-vh-50" data-mapid="YOUR_MAP_ID" data-latlng="48.8583701,2.2922873,17" data-scrollwheel="false" data-icon="../../assets/img/icons/map-marker.png" data-zoom="17"></div>

- To enable Street View Panorama mode, simply add `data-theme="streetview"` to your HTML element.

      <div class="googlemap min-vh-50" data-latlng="43.0795932,-79.0776385" data-pov='{"heading":180,"pitch":-30}' data-scrollwheel="false" data-icon="../../assets/img/icons/map-marker.png" data-zoom="1" data-theme="streetview"></div>

#### Register

Please create your free Falcon account

Name
Email address
Password
Confirm Password
I accept the terms and privacy policy

or register with
google
facebook

##### Settings

Set your own customized style

##### Color Scheme

Choose the perfect color mode for your app.

##### RTL Mode

Switch your language direction

RTL Documentation

##### Fluid Layout

Toggle container layout system

Fluid Documentation

##### Navigation Position

Select a suitable navigation system for your web application

##### Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

##### Like What You See?

Get Falcon now and create beautiful dashboards with hundreds of widgets.

Purchase
customize