Multiple markers with OpenStreetMap in WordPress

Most time you just want to show a map with a marker on your site, the WP OSM Plugin brings all you need for such a map. If you there is the need to show more than one marker in a map you should use a KML file. A basic file which can be modified come with the WP OSM Plugin, all you have to do is to download this file and adapt it.

Steps to show multiple marker in your map

  1. download the KML file from your osm plugin directory
  2. modify the KML file to your needs with your markers
  3. upload the KML file to your uploads directory
  4. generate the shortcode in the WP OSM Plugin shortcode generator
  5. copy / paste the shortcode to your post/page

Download the KML file from your osm plugin directory

The KML sample file is located in:

YourDomain.com/wp-content/plugins/osm/examples/MarkerSample.kml

Modify the KML file to your needs with your markers

Open the KML file in a texteditor, there are, two icon styles and three markers stored in the file.

Go to https://www.latlong.net/ to get the coordinates for your marker and copy lat and lon to the marker in the KML file.

Upload the KML file to your uploads directory

Once you have saved the file upload it to your uploads folder – you must not save any data in the osm plugin folder since this folder is deleted at every update. Copy the URL of your file to the clipboard.

Generate the shortcode in the WP OSM Plugin shortcode generator

Go to the post/page you want to show the map with your marker and generate the shortcode with the URL of your KML file. Copy/paste the shortcode to your post/page.

The shortcode will look somehow like this:

[osm_map_v3 map_center="autolat,autolon" zoom="autozoom" width="100%" height="450" file_list="https://Yourdomain/wp-content/uploads/MarkerSample.kml" file_color_list="none" control="scaleline" map_border="thin solid green" file_title="MarkerSample.kml"]

The map will look like this

Setting the right position of your marker

Looking at the different markers of WP OSM Plugin it shows, there are different positions for the center of the marker

While the first ist centered in the middle of the bottom, the second is on the left side centerd. Within the KML file you have the set this position via the hotspot tags. For the first marker the hotspot looks like:

The KML hotspot for these markers look like this:

<Style id="black_pin">
  <IconStyle>
    <scale>1</scale>
    <Icon>
      <href>../../../../wp-content/plugins/osm/icons/mic_black_empty_01.png</href>
    </Icon>
    <hotSpot x="16" y="0" xunits="pixels" yunits="pixels"/>
  </IconStyle>
</Style>
 <Style id="blue_pin">
  <IconStyle>
    <scale>1</scale>
    <Icon>
      <href>../../../../wp-content/plugins/osm/icons/wpttemp-blue.png</href>
    </Icon>
    <hotSpot x="0" y="0" xunits="pixels" yunits="pixels"/>
  </IconStyle>
</Style>

And if you want to change the map_center and zoom just do it manually like this:

[osm_map_v3 map_center="48.8583,2.2945" zoom="17" width="100%" height="450" file_list="https://MyDomain/wp-content/plugins/osm/examples/MarkerSample_hotspot.kml" file_color_list="none" control="scaleline" map_border="thin solid green" file_title="MarkerSample_hotspot.kml"]