From OpenStreetMap Wiki
Jump to: navigation, search
Available languages — Wordpress
Afrikaans Alemannisch aragonés asturianu azərbaycanca Bahasa Indonesia Bahasa Melayu Bân-lâm-gú Basa Jawa Baso Minangkabau bosanski brezhoneg català čeština dansk Deutsch eesti English español Esperanto estremeñu euskara français Frysk Gaeilge Gàidhlig galego Hausa hrvatski Igbo interlingua Interlingue isiXhosa isiZulu íslenska italiano Kiswahili Kreyòl ayisyen kréyòl gwadloupéyen kurdî latviešu Lëtzebuergesch lietuvių magyar Malagasy Malti Nederlands Nedersaksies norsk norsk nynorsk occitan Oromoo oʻzbekcha/ўзбекча Plattdüütsch polski português română shqip slovenčina slovenščina Soomaaliga suomi svenska Tiếng Việt Türkçe Vahcuengh vèneto Wolof Yorùbá Zazaki српски / srpski беларуская български қазақша македонски монгол русский тоҷикӣ українська Ελληνικά Հայերեն ქართული नेपाली मराठी हिन्दी অসমীয়া বাংলা ਪੰਜਾਬੀ ગુજરાતી ଓଡ଼ିଆ தமிழ் తెలుగు ಕನ್ನಡ മലയാളം සිංහල ไทย မြန်မာဘာသာ ລາວ ភាសាខ្មែរ ⵜⴰⵎⴰⵣⵉⵖⵜ አማርኛ 한국어 日本語 中文(简体)‎ 吴语 粵語 中文(繁體)‎ ייִדיש עברית اردو العربية پښتو سنڌي فارسی ދިވެހިބަސް
WordPress logo.svg

Wordpress (wordpress.org) is a very popular blogging system and, more generally, a content management system powering a lot of websites. Wordpress users can integrate OpenStreetMap maps in several ways.

Static map images

A simple static image is not to be sniffed at. They load faster with no compatibility problems, and can easily be linked to a slippy map (e.g. to the openstreetmap.org front page) to let visitors zoom etc.

To embed an image, obviously you could simply screenshot a little map image, and then upload it and embed it via the normal wordpress image upload procedure. Alternatively you might use an img url to one of the Static map images services.

Using a plugin

There are many plugins available for wordpress which offer some OpenStreetMap related functions. See wordpress plugins with the 'openstreetmap' tag

Manually embedding osm maps

If you have created your own special map either with help of some service such as the EasyMap SlippyMap Generator or by writing the javascript code on your own, you need to manually embed it in your wordpress posts or pages. There are two libraries with an API available: Leaflet and OpenLayers 4. The following sample shows an OpenLayers way ...

Assuming you want exactly one map e.g. for a directions / how to find us page, you will have at minimum

A web page or html snipplet that

1. references to javascript file(s), often to the external openlayers library

<script type="text/javascript" src="https://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>

2. contains javascript instructions that build the map (or a reference to a javascript file with that code)

<script type="text/javascript">

3. includes the map itself which is a div tag with id that must match the one used in the javascript code

<div id="map"></div>

Step 1

The references to the javascript files need to be placed in header template of your theme within the head section. You can edit this file under "Appearance" -> "Editor" by selecting "Header (header.php)" under "Templates" (almost all themes should have a header.php file).

Then, add the

<script type="text/javascript" src="..."></script>

lines above the line

<?php wp_head(); ?>

or, if this line should be missing, above


Step 2

As I personally prefer to have javascript code separated from html, in this instruction we will put the javascript instructions into a separate file. Just copy the javascript code represented by


in the above example into an empty text file. If you use own images you should check the links. Upload the javascript file to your wordpress installation (you may use the upload function in the media library). Don't forget to upload images if you use any, and keep in might that wordpress will store a duplicates instead of overwriting the old file when you upload newer versions, which means you need to delete the old one first.

At last, add another line

<script type="text/javascript" src="..."></script>

with the path to your javascript file below the one(s) added in step 1.

Step 3

In the page or post you want your map to be shown, switch to the html edit mode and insert a line with

<div id="map"><p>OSM map</p></div>

The text inside the div tag prevents wordpress from dropping empty div tags when switching edit modes again. However we would not really want this to show up, so we edit the css style sheet to hide it. Under "Appearance" -> "Editor" the main style sheet style.css is loaded by default, and a definition can be added

#map p {
	display: none;


You can report any problems you come across or clues you have gained on the discussion page.