Your First Map
Create your first map, add a feature, and embed it on a page — step by step.
Last updated
Create your first map, add a feature, and embed it on a page — step by step.
This walkthrough will get you from zero to a working embedded map. It takes about five minutes.
In your WordPress admin, go to Maps > Add New. This opens the Mapmaker — the visual editor where you'll configure everything about your map.
When the Mapmaker loads, you'll see:
A left panel with your features list and controls
A live map preview in the center
A right panel that shows context-sensitive settings (it starts with a welcome screen and quick-start links)
A top bar with Save, Undo/Redo, and a shortcode copy button
[SCREENSHOT: Mapmaker on first load, showing the welcome panel]
The quickest way to add a point to your map is to click directly on the map. In the right panel, click Add a point by clicking the map, then click anywhere on the map preview to drop a marker.
You can also import existing data (GeoJSON, KML, GPX, or Shapefile) by clicking Import a file in the right panel.
[SCREENSHOT: Map with a marker dropped, right panel showing marker settings]
Once you've added a marker, it appears in the left panel under Features. Click it to select it — the right panel will switch to show that feature's settings, where you can adjust its color, size, popup content, and more.
Tip: You can add as many features as you like before saving. See Features and Styling for the full range of options.
To change your map's base style, open Map Settings using the settings icon in the top bar (or the style shortcut in the right panel welcome screen). From there you can choose your map library, pick a style, and set the default view.
[SCREENSHOT: Settings panel open showing style options]
When you're happy with your map, click Save in the top-right corner. Once saved, click the [] (shortcode) button next to Save — this copies your map's shortcode to your clipboard.
The shortcode looks like this:
Paste the shortcode into any WordPress page, post, or widget area. Your map will render on the frontend exactly as it appears in the Mapmaker preview.
[SCREENSHOT: Shortcode pasted into a WordPress page block editor]
That's it! From here, explore the Mapmaker section to learn about the full range of features, controls, and styling options.
Last updated
[mapster_wp_map id="5"]