12min

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) -> Advanced Settings -> Default Marker Image

Changing the default marker image
Changing the default marker image

Uploading a marker image

Click on theΒ "Upload image" 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 "Marker Library" 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 marjer 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) -> Scroll down to the edit existing markers section

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

Edit marker
Edit marker

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

Create Custom Marker
Create Custom Marker

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 Image or Create a marker icon from the Marker Library for that category

Edit category Marker
Edit category Marker

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 05 Jul 2022
Did this page help you?
Yes
No