Preview


Usage

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

Installation

<script src='themekit/scripts/maps.min.js'></script>
<script src='https://maps.googleapis.com/maps/api/js?key=[YOUR_KEY]'></script>

Settings

Name Type Description
Map Key --
  • Go to cloud.google.com/maps-platform/
  • 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 gps-coordinates.net.

data-marker="link" data-marker="http://www.your-site.com/your-marker.png"

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.

data-marker-offset-top="123"

Set the top offset in pixel of the marker.

data-marker-offset-left="123"

Set the left offset in pixel of the marker.

Custom skin --
  • Go to snazzymaps.com 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=""