Google Map

Integrate Google Maps effortlessly to provide interactive, real-time location tracking and enhance user experience with detailed maps.

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/img/map-marker.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 AssassianCreed 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/img/map-marker.png" data-zoom="15" data-theme="AssassianCreed" 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>
Example of street view
HTML
<div 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' class='googlemap h-full'></div>