how to add an interactive map in wordpress without plugins

How to add an interactive map in WordPress without plugins

Do you want to add an interactive map in WordPress without using another plugin?

Google My Maps is the easiest way to achieve this. Follow our step by step instructions to learn the easiest way to embed an interactive map in your WordPress post!

Create an interactive map

An interactive map is a web-based map that allows users to easily explore points of interest. It provides a quick access to photos, panoramic views, travel options and reviews of the places. Google Map is the most popular one, which can be easily built, customized and maintained as well as shared via email, blog post and social media. If you use it well, it can also be a great marketing tool to engage your site users effectively (check out some cool examples).

Elegant Themes is offering more than
85 premium themes (including Divi) for only $89!
Check The Themes »

To start, go to Google My Maps. Then, click “Create a New Map”.

To explain it better, let’s assume that you want to create a map showing the best cafes in Amsterdam and add the map to your blog post.

If you already know which places you want to include in your map, you can type the names of the places or addresses in the search bar.

If you don’t, you can check some suggestions from Google by simply typing “the best cafes in Amsterdam” in the search bar (of course, the same goes to restaurants, parks, bars, gyms, etc.)

Once you press the search button, you will see the places suggested by Google.

how to add an intereactive map in wordpress

From the list, you can select the places that you would like add to your interactive (custom) map by clicking the green pin and then, pressing “Add to Map”. Then, the color of the pin will change from green to blue.

Google My Maps provide a lot of customization options such as changing the color of the pins and categorizing the locations. To learn more about how to customize your map, check this article.

how to add an intereactive map in wordpress

Once you complete the process of adding all the locations, your map is ready!

how to add an intereactive map in wordpress

To share this map, click “Share”, add a Map title and a Description, and then press “OK”.

how to add an intereactive map in wordpress

Make sure your map is set to public (as shown in the screenshot below) and click “Save”.

how to add an intereactive map in wordpress

Add an interactive map to WordPress

Let’s add your map to your WordPress post!

Click the menu button (three vertical dots) next to the map title and then, click “Embed on my site”. how to add an intereactive map in wordpress

After that, you will see some HTML that you need to copy (Don’t be scared. It is going to be very easy).

how to add an intereactive map in wordpress

Now, open your WordPress Admin page. Then, go to Edit Post screen and paste the embed code on the “text” editor as shown below.

You can adjust the size of the map by changing the width and height in the code. Now publish your page or post.

how to add an intereactive map in wordpress

That is it! Below you will see the interactive map that I’ve created for this article.

I hope you had fun creating the interactive map. If anything is unclear, please leave a comment below!


Rate this article

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5,00 out of 5)

1 comment

  • There are few marker points in blue indicating various cafes in armstdream. I want to rename them as 1,2,3… Etc for easy identification