Using Custom Images as Markers

World Map with Custom Icon Placeholder
World Map with Custom Icon

From version 2.1 of the plugin, released in May 2018, it’s possible to use an image instead of the coloured round marker. The maps are generated using the Google Geochart API, which doesn’t support this natively, so we need to manipulate the output provided by google and there are some limitations when doing this.

Current limitations:

  • You can only use one custom image for all markers. It’s not possible to have different markers with different images.
  • The magnifying lens effect that displays when markers overlay will be disabled, since we are not able to replace the markers inside the lens with our custom image.

How to Implement the Custom Image Marker

  1. Upload the image you want to use into your media library and copy the URL
  2. Go to the settings page of the plugin and place the URL in the ‘Custom Image Icon’ field.
  3. Select the position of the image in relation to the marker coordinate – top or center.
  4. When creating or editing your map, select the ‘Custom Icon’ display mode and follow the on-screen instructions to add new entries.
  5. Save your map and place the shortcode on the page. You should see the map with your custom image as markers.

Override Default Image URL

If you want to have different maps with different images as markers, you can override the URL set in the settings, using the paramater icon-url directly in the map shortcode. Example:

show-map id=’1′ icon-url=’https://link_to_your_image’