Google Map
These modular elements can be readily used and customized in every layout across pages.
Example
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-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
Eiffel Tower
Gustave Eiffel's iconic, wrought-iron 1889 tower,
with steps and elevators to observation decks.
<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
<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>