13min

Using Custom marker Icons on your map

Overview

Using custom marker icons is a great way to personalize a map on your website. You can find great custom icons created by Nicolas Mollet in hisΒ Maps Icons Collection. We also have free icons available on ourΒ website. If you are feeling adventurous, googleΒ free google map icons png. When using third-party icons, please remember to credit the developer on your website.

There are three ways to use custom markers on your map.

Prerequisites

The Following Plugin/s need to be installed and active

  • WP Go Maps
  • WP Go Maps Pro Add-on

Change All Markers

To change the icon for all of the markers on your map, please navigate to:

WP Go Maps -> Maps (edit your chosen map) ->Settings -> Advanced ->Default Marker Image

Changing the default marker image
Changing the default marker image

Uploading a marker image

Click on theΒ "Upload" button, then press the select files button to upload files from your computer or select the Media Library tab to select an icon from yourΒ Media Library, once the desired image has been selected press the Use this image button.

Creating a marker image

Click on the "Create" button to open the marker icon editor. Here you can create your own Marker icon by selecting a marker style and applying effects to the the icon, including Hue Rotate, Brightness, Saturate Contrast, Opacity and Invert.

Content can be added to your marker in the Overlay tab, this can be either text or icon (font awesome) based. The size, offset and colour inversion of the overlay can be changed here too.

By selecting the Library link in the top right marker icon editor modal, previously created markers can also be selected.

Change a Specific Marker

To change a specific marker icon in your map, open the marker listing for your map:

WP Go Maps -> Maps (Edit your chosen map) -> Markers

select the "edit" action for the marker that you'd like to change

dit the marker
dit the marker

Scroll down to the Marker Icon section of the marker editor and edit the marker. You can Upload or Create markers in the same way as described Change All Markers section of this guide.

One key difference when changing a specific marker is you now also have the ability to change the marker icon that is displayed when the mouse if hovered over the marker. This can be changed on the Hover Tab

Editing the marker displayed on Hover
Editing the marker displayed on Hover

Change a Marker Category

The last method of using custom marker icons on your map, is to useΒ Marker Categories. Please note that you first need to have createdΒ Marker Categories, in order to use this method and apply categories in the Map Editor. To create (or edit)Β Marker Categories, please navigate to

WP Go Maps -> Categories

To edit the Marker icon of an existing category, select the "Edit" button and then Upload or Create a marker icon for that category

Edit marker category
Edit marker category
Edit category Icon
Edit category Icon

Please take note of the Priority Setting for the category. In instances where a marker has been assigned to more than one Category, the Icon of the category with the highest priority, is the icon that will be displayed for that marker

ο»Ώ

Updated 13 Jul 2022
Did this page help you?
Yes
No