Wordpress

How to integrate osm maps ("slippy maps" based on openlayers) in a wordpress blog.

Contents 1 Using a plugin 2 Manually embedding osm maps 2.1 Step 1 2.2 Step 2 2.3 Step 3 2.4 Troubleshooting

Using a plugin

An easy way to embed OSM into your WordPress blog is to use the plugin "Leaflet Maps Marker". It allows you to easily pin, organize & show your favorite places through OpenStreetMap/WMTS, Google/KML, GeoJSON or Augmented-Reality browsers. For a demo and a complete list of features please visit http://www.mapsmarker.com.

Another easy way is to use the Wp-osm-plugin as it does not require you to deal with javascript or html. The features however are restricted to those the authors of the plugin considered worth integrating.

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.

Manually embedding osm maps

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="http://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">
//<![CDATA[
.
.
.
//]]>
</script>

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

</head>

Step 2

As I personally prefer to have javascript code separated from html, in this instruction we will put the javascript instructions into a seperate 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;
}

Troubleshooting

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