Add a map with marker and html popup in WordPress

A.) Activate WP OSM Plugin metabox
B.) Add a marker to your post / page
C.) Add a map with the marker to your post / page

A.) Activate WP OSM Plugin metabox

If the “WP OSM Plugin shortcode generator” is not activated out of the box in your site you have to activat it at “Edit Post” / “Edit Page”:

WordPress_OpenStreetMap_Plugin_metabox_01_b

1.) click [screen options]
2.) activate “WP OSM Plugin shortcode generator”

B.) Add a marker to your post / page

You have to save a marker to your post / page to add it later to the map:

WordPress_OpenStreetMap_Plugin_marker_02

3.) Choos “Add Marker”

4.) Add a “marker name”, select an icon and optional add a “text”, eg:

<img src='../../../../wp-content/plugins/osm/images/Company_01.jpg' alt='MyPhoto'><br><b>Fa. Success</b><br>Milky Way 23<br>0815-Wherever<br> Land of Snergs

5.) Click in the map to set the location of your marker

WordPress_OpenStreetMap_Plugin_marker_03

After you clicked into the map you see the preview of the marker text – if set.

6.) If it’s fine click [Save] to save the marker for this post / page. You will get the message:”Marker saved, you can use it at [Map & Marker]!

C.) Add a map with the marker to your post / page

WordPress_OpenStreetMap_Plugin_marker_04

7.) Click “Map & Marker”

8.) Select “01” to choose the marker you have added

9.) Adjust the map and click into the map to generate a shortcode like this (withou “*”):

[*osm_map_v3 map_center="44.842,1.21" zoom="4" width="100%" height="350" map_border="thin solid red" post_markers="1" type="pioneer" control="fullscreen,scaleline,mouseposition"]

10.) Copy the shortcode and paste it into your post / page.

The result looks like this – click on the marker to see the html-text.