<div class="google-map" data-marker="marker.png" data-coords="28.6139391,77.20902120000005"></div>


<script src='themekit/scripts/maps.min.js'></script>
<script src='[YOUR_KEY]'></script>


Name Type Description
Map Key --
  • Go to
  • Click the Get started button and select Maps.
  • Login with your account and continue.
  • You must insert a valid billing account (use your credit card or a virtual card). Don't worry, you will not pay nothing, never.
  • After you successfully added your billing account you will get the key.
  • Insert the key by replace the string [YOUR-KEY] of the installation script with your key.

Watch a video tutorial here.
Options Attribute
data-address="value" data-address="251 Monroe Ave, Kenilworth, NJ 07033, USA"

Address of the map, with sintax: address, city, state. Other address formats may been recognized.

data-coords="123,123" data-coords="40.7127837,-74.00594130000002"

GPS coordinates of the map. You can get its from

data-marker="link" data-marker=""

Marker image link of the map.

data-skin="value" data-skin="black"

Style and color of the map. You can choose 3 built-in skins: gray,black,green.

data-zoom data-zoom="5"

Map zoom level.


Set the top offset in pixel of the marker.


Set the left offset in pixel of the marker.

Custom skin --
  • Go to and select a ready skin or create your own one.
  • Copy the skin array JavaScript Style Array.
  • Open the script scripts/maps.min.js and go to the last lines, add a new skin into the array arrSkins.
  • Use the new skin like usually with the attribute data-skin=""