Google Maps

Google Maps

The Google Maps shortcode embeds an interactive map using the Google Maps JavaScript API. Add the class gmap to any container, size it with utility classes, and configure the location, zoom, markers, and custom styles through data-* attributes. An API key is required.

API key requirement

The map will not render without a Google Maps API key. Set gmapAPI in js/functions.bundle.js (or via cnvsOptions). If the key is missing, Canvas replaces the map area with a warning notice instead of failing silently.

Basic map by address

The simplest setup uses data-address. The plugin geocodes the address and drops a marker there.

<div class="gmap h-100" data-address="Melbourne, Australia" data-zoom="14"></div>

Size the container yourself, for example with h-100, vh-40, or a fixed height, since an empty map has no intrinsic height.

Map by coordinates

Use data-latitude and data-longitude for precise placement.

<div class="gmap vh-40"
     data-latitude="41.8333925"
     data-longitude="-88.0121473"
     data-zoom="12"></div>

Key attributes

• data-address: a text address to geocode and mark. Takes priority over latitude/longitude.
• data-latitude / data-longitude: exact coordinates (used when no address is given).
• data-zoom: zoom level. Default 12.
• data-maptype: ROADMAP (default), SATELLITE, HYBRID, or TERRAIN.
• data-scrollwheel: set to false to disable zoom on mouse-wheel scroll.
• data-content: HTML for the marker info window when using a single address/coordinate.
• data-markers: a JSON array of marker objects for multiple markers.
• data-icon: a JSON object describing a custom marker image.
• data-styles: a JSON array of Google Maps style rules for custom map colors.
• data-control-pan, data-control-zoom, data-control-maptype, data-control-scale, data-control-streetview, data-control-overview: set to true to show the matching map control (all off by default).

Multiple markers with custom icon

<div class="gmap h-100"
     data-address="Melbourne, Australia"
     data-markers='[{address: "Melbourne, Australia", html: "<div class=\"p-2\" style=\"width: 300px;\"><h4 class=\"mb-2\">Hi! We are Envato!</h4><p class=\"mb-0\">We operate marketplaces where people buy and sell digital goods.</p></div>", icon:{ image: "images/icons/map-icon-red.png", iconsize: [32, 39], iconanchor: [32,39] } }]'></div>

Styled (custom colored) map

Pass a data-styles JSON array. This example lightens water, landscape, and roads for a soft, muted look.

<div class="gmap h-100"
     data-address="Melbourne, Australia"
     data-scrollwheel="false"
     data-styles='[{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]}]'></div>

Full-bleed background map

Position the map absolutely behind other content, useful for page titles and contact sections.

<div class="gmap-bg gmap h-100 position-absolute top-0 start-0 w-100 z-1"
     data-address="Melbourne, Australia"
     data-scrollwheel="false"></div>

Tips

• Prefer valid JSON for data-markers, data-styles, and data-icon. The plugin will warn if it has to fall back to loose JS-literal parsing.
• Always give the .gmap element a height, or the map will collapse to zero pixels.
• Use data-scrollwheel="false" on maps embedded inside scrollable pages so the wheel scrolls the page, not the map.
• Generate custom data-styles visually with a Google Maps styling tool, then paste the JSON array.