Google Map

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

Example

Oops! Something went wrong.
This page didn't load Google Maps correctly. See the JavaScript console for technical details.
Html
<div class="googlemap min-vh-50" data-gmap data-latlng="48.8583701,2.2922873,17" data-scrollwheel="false" 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>
JavaScript
<script src="https:maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async></script>
Get your API key⟶
Map color schemes

Change the value of data-theme='' to any of the followings

  • Default
  • Gray
  • Midnight
  • Hopper
  • Beard
  • AssassianCreed
  • SubtleGray
  • Tripitty

Example

With AssassianCreed scheme

Oops! Something went wrong.
This page didn't load Google Maps correctly. See the JavaScript console for technical details.
<div class="googlemap min-vh-50 mt-3" data-gmap data-latlng="48.8583701,2.2922873,17" data-scrollwheel="false" data-icon="../../assets/img/map-marker.png" data-zoom="17" data-theme="AssassianCreed">
  <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

Oops! Something went wrong.
This page didn't load Google Maps correctly. See the JavaScript console for technical details.
<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>
BESbswy
BESbswy
BESbswy