InkThemes Blog

Embed Map in Post/Page of Your WordPress Site by OSM – OpenStreetMap

Many of WordPress users are interested to show the map along with exact location and proper terminologies in their site. No doubt it looks impressive and make a clear view in your reader’s mind. So if you are interested to display your map on any of the page/posts of your WordPress site, then you are on the correct place here. I am going to provide you a solution for it, keep on reading further.

A plugin OSM (Open Street Map) , it is pronounced as ‘O’ ‘S’ ‘M’ but I pronounce it as “awesome”, as it is really a simple and  an awesome plugin that  helps you to locate your location through a map, which can even be customized from your end according to your requirement like border color, type of marker etc.

Some key features of this plugin are -

  • embeds OpenStreetMap, OpenSeaMap and Google Maps maps to your posts/pages
  • embeds external maps to your posts/pages
  • visualizes several tracks / routs in different colours (gpx and kml)
  • visualizes popup-html-markers (list in txt-file or single in the shortcode)
  • visualize all geotagged posts of your blog in one map with/without a link to the post
  • use custom field to add geolocation to your blog
  • geo data are written to html-meta tags of your blog
  • uses OpenLayers Library
  • extends Mediathek rights to upload GPX files.

Now you may be eager to know how to use this plugin, so here is the link to download this plugin and use it, and enhance your site by making it more user friendly.

So here is the step by step guidelines to use this plugin, once you entered your dashboard.

Download OSM WordPress Plugin.

You can download OSM plugin directly from the WordPress.org repository or You can also check their official website

Step 1:

Install and activate OSM plugin as shown in the image below -

oms1

osm2

osm3

Step 2:

Once you activated this plugin, now you need to move to “Settings” menu and select “OSM” there, and finally here you can customize this plugin according to your required settings, as shown below -

osm4

Step 3:

Now you can set the marker details here, that will be displayed on the map through the marker that you have selected above.

osm5

Step 4:

You can also set border you would like around your map along with some controls like scaleline or mouse position etc as shown below -

osm6

Step 5 :

 At this step, you will find a default map and then you need to scroll this map to point out your exact location and then copy the shortcode that is unique for that selected location.

osm7

Step 6:

Here you will see the shortcode that is been highlighted, that is to be copied and pasted on the post/page you want, as shown further.

Osm8

Step 7:

Select the page/post from your dashboard, and either double click on it or open it through “edit” option.

osm9

Step 8:

Paste the code in the page where ever you want to display the map, update it and then view your post, as shown in the image below -

osm9_001

Step 9:

Your map is ready on your site, and that’s it.

osm9_002

Hope you found your solution here, let me know about your feedback and experience regarding this post via comments, they are always most welcome!!!

About Neha Yadav

"I like to post the blogs related to real life and helpful for a successful life. You can gain more knowledge and share your issues with me on our website via comments"

Comments & Responses

  1. I think the admin of this web page is really working hard for his
    web page, because here every material is quality based stuff.

  2. wap4u.x10.mx says:

    I am curious to find out what blog system you have been working with?
    I’m having some small security problems with my latest

    blog and I would like to find something more safe. Do you have any solutions?

Leave a Reply

Your email address will not be published. Required fields are marked *