How to Add Interactive Maps to WordPress with MapMetrics (Step-by-Step Guide)

#nocode #wordpress #tutorial #tooling

Want to add beautiful, interactive maps to your WordPress site — without coding headaches?

The MapMetrics WordPress Plugin gives you customizable, privacy-friendly, and lightweight maps that you can embed with a simple shortcode.

Here’s how to set it up in under 10 minutes.

Step 1: Install the Plugin

Upload the plugin folder to /wp-content/plugins/ or upload the zip in the dev portal.
Activate it in WordPress Admin → Plugins
Go to Settings → MapMetrics Map

Step 2: Get Your API Key

You’ll need a MapMetrics API key.

— Visit the Key Creation Guide: https://docs.mapatlas.xyz/overview/sdk/examples/key-creation.html
— Generate a key and keep it private

👉 This lets your site fetch maps securely.

Step 3: Create a Custom Map Style

Want a light, dark, or satellite map? You can customize colors, fonts, and layers.

— Follow the Style Creation Guide: https://docs.mapatlas.xyz/overview/sdk/examples/style-creation.html
— Copy the generated style URL (it includes your token)
— Example:

https://gateway.mapmetrics-atlas.net/styles/?fileName=xxx/YourStyle.json&token=your-token

Step 4: Add Your Style to WordPress

In WordPress Admin → Settings → MapMetrics Map:
— Give it a friendly name (e.g., “Dark Mode”)
— Paste your style URL
— Save

Now you can use it in shortcodes:

[mapmetrics_map style=”Dark Mode”]

Step 5: Embed Your First Map

The simplest shortcode:

[mapmetrics_map style=”Light”]

This creates a full-width, interactive map (default center: Paris).

Step 6: Customize Your Map

Change size + location:

[mapmetrics_map style=”Light” lng=”4.895" lat=”52.370" zoom=”12" width=”800px” height=”600px”]

Add markers:

[mapmetrics_map style=”Light” marker=”true”]

Add a custom marker image:

[mapmetrics_map style=”Light” marker=”true” marker_image=”https://cdn.mapmetrics.net/images/car.png" marker_width=”60" marker_height=”60"]

Draw a route (polyline):

[mapmetrics_map style=”Streets” polyline=”2.34,48.85|2.35,48.86|2.36,48.87" polyline_color=”#FF0000" polyline_width=”4"]

Step 7: Add Animations ✨

Auto-zoom effect:

[mapmetrics_map style=”Satellite” autozoom=”true” autozoom_start=”2" autozoom_duration=”3000"]

Auto-loop tour:

[mapmetrics_map style=”Light” autoloop=”true” autoloop_locations=”2.349,48.852,15|4.895,52.370,14|-0.127,51.507,12"]

Real-World Examples

🏡 Real Estate Listings — Show homes + nearby transit
✈️ Travel Blogs — Animate your itinerary
🚚 Delivery Services — Display multiple routes
🎶 Events — Mark stages, food courts, and entrances

Why MapMetrics (vs Google Maps)?
✅ Fully customizable styles (colors, layers, fonts)
✅ Privacy-friendly (no tracking)
✅ 3D camera + animations

Wrap-Up

With the MapMetrics plugin, you can:
— Add maps in minutes using shortcodes
— Customize styles, markers, and routes
— Create animations + 3D effects for more engaging pages

👉 Perfect for businesses, travel blogs, events, and real estate sites.

Next Steps