Add interactive Round Markers to the map

You are here:

The plugin offers the possibility to add markers anywhere on the map. They can be coloured, with a different colour on hover and trigger actions on click. You can also add markers to a map that already has interactive regions coloured.

Selecting the map to display

We’ll skip the long description on this one, since we covered it on the article on how to add regions.

Add Round Markers

Once you have the map selected, go the ‘Round Markers’ and click the ‘Add New Marker’ option. This should display a panel like this one:

Add interactive Round Markers to the map
Add Round Markers Panel

Each marker will need real world coordinates to know where to display. We’ll talk about it further down, but it’s important to keep that in mind. Depending on which version of the plugin you’re using you might have different options available, but here are the important ones:

  • Title: mostly for administration purposes for you to identify the marker, but it can be used for other purposes, so keep it descriptive of the marker.
  • Coordinates: this is the important one. You’ll need to add latitude and longitude (more info below).
  • Tooltip content: you’ve guessed it – the content that will display in the tooltip when we hover the marker.
  • Action content: when the marker is clicked, this information will be passed to the ‘action’ selected to run. Usually this would be a URL to open for example, if you have the action ‘Open new URL’ selected as the Click Action.

You can add as many markers as you want, clicking the ‘Add New Marker’ button and repeating the process.

Visual & Click Settings

Further down the page you’ll find the ‘Default Values’ panel where you can set the colours for the regions and select which action to perform on click.

Default values for markers
Default marker values.

Here you can set the marker size – the radius option – colours and click action.

Getting coordinates for the marker

Each marker will need real world coordinates in order to be placed in your map. These coordinates must be for a location within the limits of the map currently displaying. Meaning that if you’re currently displaying a map for Italy, if you add a marker with coordinates for California, the marker will not display.

There are 3 ways of getting the coordinates:

  • Adding the coordinates manually, getting them, for example, from an external website;
  • Clicking on the map preview to get the coordinates and add them from there;
  • Adding a Google Maps API Key in the settings and have an autocomplete builtin the add marker form.

Google Maps API Key

If you – optionally – add a Google Maps API key in the settings page of the plugin, you will be able to get the coordinates directly in the administration panel of the map when adding a marker. This will enable an extra ‘Location’ field in the markers panel:

Add interactive Round Markers to the map

Extra field to get coordinates when Google API Key is enabled

If you have this enabled, after you write a name on the location field, it will search for the coordinates for that location name.

Adding the coordinates manually

However, you don’t need the Google Maps API Key, you can still add markers by adding the coordinates manually. You can use sites like these to get the coordinates:

On any of the sites above you can get both the latitude and longitude of a place and copy those values over to the marker details.

Using the map preview to add markers

Another way of adding markers (only available at the moment for the round markers) is to click the map preview in the place where you want to add the marker and then the coordinates will display together with an option to add a marker on that location.

Add interactive Round Markers to the map
blank

Posted by Carlos Moreira

Lead developer of Interactive Geo Maps plugin.