Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore et dolore magna aliqua. Utenim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Usage

<section class="section-map section-map-right">
    <div class="google-map" data-coords="12.123456,12.123456" data-zoom="12" data-marker-pos="left"></div>
    <div class="container">
        
    </div>
</section>

<section class="section-map">
    <div class="google-map" data-coords="12.123456,12.123456" data-zoom="12" data-marker-pos="right"></div>
    <div class="container">
        
    </div>
</section>

Settings

Name Type Description
Alignment -- Add the class section-map-right to the section and set the attribute data-marker-pos="right" to move the content box on right and the map marker on left.
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 valing 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="URL" 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=""
Full width CSS Add the class section-full-width to make the section full width.
Try it Full width
Code location Information The sections must be placed inside the <main> </main> code block. For more details visit the getting started page.
Section base
Section image
Section slider
Section video
Section block