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”

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]!

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.

Only the first marker:
[*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”]

Only the second marker:
[*osm_map_v3 map_center=”44.842,1.21″ zoom=”4″ width=”100%” height=”350″ map_border=”thin solid red” post_markers=”2″ type=”pioneer” control=”fullscreen,scaleline,mouseposition”]

All markers:
[*osm_map_v3 map_center=”44.842,1.21″ zoom=”5″ width=”100%” height=”350″ map_border=”thin solid red” post_markers=”all” type=”pioneer” control=”fullscreen,scaleline,mouseposition”]

Christin hat eine Anleitung geschrieben um mehrere Marker in der Karte anzuzeigen: Karte mit mehreren Markern