Maps
All modular elements can be readily used and customized in every layout across pages.
Tooltip title
A nice description about your place
Customize it as you want.
HTML
<div class="googlemap" data-gmap="data-gmap" data-latlng="41.8333925,-88.0123393" data-scrollwheel="false" data-icon="../assets/images/hotel-icon.png" data-zoom="15" data-theme="Default" style="min-height:300px">
<div class="marker-content py-3">
<h5>Tooltip title</h5>
<p>A nice description about your place<br /> Customize it as you want.</p>
</div>
</div>
JavaScript
<script src="https:maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async="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 SubtleGray
scheme
Tooltip title
A nice description about your place
Customize it as you want.
HTML
<div class="googlemap" data-gmap="data-gmap" data-latlng="41.8333925,-88.0123393" data-scrollwheel="false" data-icon="../assets/images/hotel-icon.png" data-zoom="15" data-theme="SubtleGray" style="min-height:300px">
<div class="marker-content py-3">
<h5>Tooltip title</h5>
<p>A nice description about your place<br /> Customize it as you want.</p>
</div>
</div>