Shortcodes

Mapsmith maps are embedded into your WordPress pages and posts using shortcodes. Each map gets its own unique shortcode.

Basic Usage

After saving a map in the Mapsmith editor, you'll see a shortcode displayed in the header area, for example:

[mapsmith id="1"]

Click the shortcode to copy it to your clipboard, then paste it into any WordPress page, post, or widget that supports shortcodes.

Where to Place Shortcodes

Classic Editor

Switch to the Text tab and paste the shortcode directly. In the Visual tab, you can also paste it and it will render as a placeholder.

Block Editor (Gutenberg)

  1. Add a new block by clicking the + button
  2. Search for Shortcode
  3. Add the Shortcode block
  4. Paste your Mapsmith shortcode into the block
  5. Preview or publish the page to see the map

Page Builders

Most page builders have a shortcode or HTML module:

  • Elementor — Use the Shortcode widget
  • WPBakery — Use the Raw HTML or Text Block element
  • Beaver Builder — Use the HTML module
  • Divi — Use the Code module
  • Bricks — Use the Shortcode element

Widget Areas

In Appearance → Widgets, add a Text or Custom HTML widget and paste the shortcode. Note that maps in narrow widget areas may not look ideal — consider the sidebar width when choosing layout options.

Theme Templates (PHP)

To render a map directly in a PHP template file, use the do_shortcode() function:

<?php echo do_shortcode('[mapsmith id="1"]'); ?>

Multiple Maps on One Page

You can place multiple Mapsmith shortcodes on the same page. Each map operates independently with its own sidebar, popover, and controls. For example:

[mapsmith id="1"]

[mapsmith id="2"]

Responsive Behavior

Mapsmith maps are fully responsive. On screens narrower than 768px:

  • The sidebar stacks above the map instead of sitting beside it
  • The sidebar gets a compact max height with scrolling
  • Popovers anchor to the bottom of the map canvas
  • Overlay mode reverts to stacked layout

Styling the Container

The map container has the CSS class .mapsmith-container. You can target it with custom CSS to adjust sizing or spacing:

.mapsmith-container {
  margin: 2rem 0;
  max-width: 1200px;
}

The map height is controlled by the Map Height setting in the map editor, which accepts any valid CSS height value like 600px, 80vh, or calc(100vh - 80px).