Maps

These modular elements can be readily used and customized across pages and in different blocks.


Explore all of Stack’s modular elements
at the Element Index Page →

Iframe Map

Basic iframe maps can be embedded from maps.google.com. By default, the iframe map will span 100% the width of the container it is placed inside.

NOTE: Customizing the maps appearance is not available in the iframe embed.

Google Maps API

For a map with more style options, opt for the Google Maps API map. This map requires you to have your own developer API key from Google but opens up more attractive options for embedded maps.

There are a number of data attribute options to customise the behaviour of the map:

  • data-maps-api-key=”ApIKeYtExt1234″ – Your Maps API Key, required to use a Google JS API map.
  • data-address=”123 Address Place, Townsville” – a simple text address acceptable by Google Maps with up to 10 addresses separated by semicolons.
  • data-map-zoom=”NUM” – Sets zoom level between 1 and 12.
  • data-map-style=”JSON” – Apply any style from Snazzy Maps or make your own.
  • data-marker-title=”Title Text” – Text to appear when user hovers over map marker.

Looking for styled map sections?

View Map Sections

or try the admin demo ↗

Dear Indulgence Customers
 
We shall be moving to a new location at 22/F Silver Fortune Plaza at 1 Wellington Street effective Saturday, 7th of April and therefore unable to serve you between 30th March to 6th April, both days inclusive.  
 
You may continue to book through our online system by clicking Appointment for your desired services. 
 
We are looking forward to welcoming you to our new salon.