MapSVG 3.2.x tutorial

6. Markers

In the following tutorial we will continue to work with the map we have create in previous tutorial: 5. Search & filters. This time we will add Markers into our map to show dealer locations.

Important to remember: every time you need to show Markers on a map, you should start with setting up a Database Objects with Marker custom field. Think of Markers as a visual representation of some object (in this tutorial Database Objects are dealers).

Go to Menu > Database tab and click on Edit fields button in the toolbar.

Add a field:

  • Type Marker

Click Save fields button and go back to the list of Database Objects by clicking on List button in the toolbar.

Click on the first dealer in the table. Enter a name of any city in USA into Marker field. After you choose the city from autosuggestion list - marker is being added to the map. Add markers for other dealers.

Let's add Tooltips for Markers to show company name and email on mouse over.

Also let's show Details View on click.

Turn on Menu > Settings > Tooltips: ON option.

Then go to Menu > Actions.

Change settings as follows:

  • Marker click:
    • Show details view: On

Go to Menu > Templates, choose Tooltips > DB Object tooltip template from drop-down list.

Add the following code into the template textarea field:

<b>{{company}}</b><br />
{{email}}

Make sure the map is in Preview mode and try to hover the mouse pointer on any Marker to see a tooltip.