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
- 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-mapidto render the Google Maps API v3 with theAdvancedMarkerElement.<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>
