Section reference › Forms & contact

Map band `"type": "map"`

A full-width Google map with a floating card of address, hours and phone, plus buttons. Use it near the bottom of a contact or location page.

Example#

Paste this into the sections list of a page file:

JSON

{
  "type": "map",
  "query": "Ferry Building, San Francisco",
  "zoom": 15,
  "title": "Find us",
  "items": [
    {
      "icon": "geo-alt",
      "title": "Address",
      "text": "1 Ferry Building, Shop 42<br>San Francisco, CA 94111"
    },
    {
      "icon": "clock",
      "title": "Open daily",
      "text": "7:00 – 19:00"
    },
    {
      "icon": "telephone",
      "title": "Phone",
      "text": "+1 (555) 014-3300"
    }
  ],
  "buttons": [
    {
      "label": "Get directions",
      "href": "https://maps.google.com/?q=Ferry+Building+San+Francisco",
      "style": "primary",
      "icon": "sign-turn-right"
    }
  ]
}

Options#

Option	Type	Default	Description
`query`	string	—	Address or place name to show on the map.
`zoom`	number	`14`	Map zoom level (about 3 = country, 14 = streets, 18 = building).
`title`	string	—	Heading of the card.
`items`	array	—	Rows in the card.
`buttons`	array	—	Buttons shown at the bottom of the card. See the button fields below.

Also accepts the options every section accepts: id, tone, padding, fluid, class, hidden.

Fields of each entry in `items`#

Option	Type	Default	Description
`icon`	string	—	Bootstrap Icons name.
`title`	string	—	Small heading.
`text`	string	—	Detail text; <br> allowed.

Fields of each entry in `buttons`#

Option	Type	Default	Description
`label`	string	—	Button text. A button without a label is not shown.
`href`	string	—	Link target, e.g. "contact.html" or "#pricing". Defaults to "#".
`style`	string	`primary`	Button look. Values: `primary \| outline \| light \| dark \| accent \| link`
`icon`	string	—	Bootstrap Icons name shown after the label (e.g. "arrow-right"). "link" buttons get an arrow automatically.
`video`	string	—	YouTube embed URL (https://www.youtube.com/embed/VIDEO_ID). When set, the button opens the video in a pop-up instead of following href.

Tips#

Defaults: padding "none" (the map touches the neighbouring sections).
The map needs an internet connection and uses Google Maps without an API key.
"fluid" has no effect on this section.

Where it's used#

Open these pages in template/ to see it working:

Creative Agency: template/creative-agency/contact.html (source src/demos/creative-agency/pages/contact.json)
Corporate: template/corporate/contact.html (source src/demos/corporate/pages/contact.json)
Law Firm: template/law-firm/contact.html (source src/demos/law-firm/pages/contact.json)
SaaS Product: template/saas/contact.html (source src/demos/saas/pages/contact.json)
Tech Conference: template/conference/contact.html (source src/demos/conference/pages/contact.json)
Restaurant: template/restaurant/contact.html (source src/demos/restaurant/pages/contact.json)
Coffee Shop: template/cafe/index.html (source src/demos/cafe/pages/index.json)
Hotel & Resort: template/hotel/contact.html (source src/demos/hotel/pages/contact.json)
Wedding: template/wedding/venues.html (source src/demos/wedding/pages/venues.json)
Gym & Fitness: template/gym/contact.html (source src/demos/gym/pages/contact.json)
Yoga Studio: template/yoga/home-2.html (source src/demos/yoga/pages/home-2.json)
Medical Clinic: template/medical/index.html (source src/demos/medical/pages/index.json)
Dental Clinic: template/dental/contact.html (source src/demos/dental/pages/contact.json)
Pet Care: template/pet-care/home-2.html (source src/demos/pet-care/pages/home-2.json)
Construction: template/construction/contact.html (source src/demos/construction/pages/contact.json)
Car Dealer: template/car-dealer/home-2.html (source src/demos/car-dealer/pages/home-2.json)
Travel Agency: template/travel/contact.html (source src/demos/travel/pages/contact.json)
Photographer: template/photography/contact.html (source src/demos/photography/pages/contact.json)
Architecture Studio: template/architecture/contact.html (source src/demos/architecture/pages/contact.json)
Interior Design: template/interior-design/contact.html (source src/demos/interior-design/pages/contact.json)
Portfolio: template/portfolio/contact.html (source src/demos/portfolio/pages/contact.json)
Music Festival: template/music-festival/home-2.html (source src/demos/music-festival/pages/home-2.json)
Fashion Store: template/fashion-store/stores.html (source src/demos/fashion-store/pages/stores.json)
Charity: template/charity/contact.html (source src/demos/charity/pages/contact.json)
Logistics: template/logistics/network.html (source src/demos/logistics/pages/network.json)

Map band "type": "map"