2 min read

How to add an interactive map to any website

How to add interactive maps to a website

In this guide, I’ll show you how to add an interactive map to any website where you can insert HTML code. It doesn’t matter if it’s a WordPress or Ghost blog, a custom one-page website, or even an online store — you can add an interactive map with Make Me Map anywhere.

Options for Adding Maps to Your Website

  1. No-code via iframe
    You can select a map style, add pins, routes, and other data in the online editor. The editor then provides you with a short code snippet (just a few lines of text), which you can insert into the HTML editor of your CMS (like WordPress, Ghost, Notion, etc.), e-commerce platform (like Shopify, Wix, etc.), or directly into your HTML code using an IDE (such as Visual Studio Code).
    We’ll cover this option today as it’s the simplest and most reliable.
  2. No-code via plugins/apps
    This method is available only for a few platforms and requires installing a special plugin (e.g., for WordPress) or app (e.g., for Shopify). You should also usually follow complex setups with API keys, like with the WP Maps plugin. Keep in mind that some plugins and apps may affect your website’s performance, and you’ll need to keep them updated. Additionally, if a platform changes how plugins/apps work, your map integration may stop functioning.
  3. Custom map using APIs
    You can build your own interactive map using APIs like Google Maps API or Mapbox. This is the most expensive and time-consuming option, recommended only for projects that require highly customized maps.

How to Add a Map to Any Website via iframe

It’s very simple — and free unless your website receives huge traffic. (The maximum you’ll pay with Make Me Map is $25/month, compared to unlimited usage-based costs with the Google Maps API.)

Let’s create and embed a map:

  1. Open the map editor at app.makememap.com
  2. Click New Map, select a map style, and add pins (places) and other data to your map.
  3. Open your post editor and, depending on your CMS, e-commerce platform, or code editor, insert the HTML code.
    For example, in Ghost CMS, click the + button and select HTML, as shown in the screenshot below.
Ghost CMS: How to add an interactive map

Click Publish. You’ll see a code snippet like the one below:

<iframe width="100%" height="400px" src="https://hej-map.makememap.com/map-name" frameborder="0" allowfullscreen></iframe>

That’s it! Save your updated post or webpage, reload it, and you should see your map.

Questions?

Feel free to contact us with any questions, ideas, or feedback at hey@makememap.com — and don’t forget to share your maps with us!

Marina