World Map showing Addresses

Click on the map!

This is an example of a map that shows addresses, when a marker is clicked.

The map configuration can be found here:

Map settings

Name	Value	Description
Region	World	List with all available regions
Width	auto	Width of the map in pixel. 'Auto' means that the map is centered in the available width.
Height	auto	Height of the map in pixel. 'Auto' means that the map is centered in the available height.
Display mode	Markers	Specifies the display mode of the map.
Border resolution	Countries	The resolution of the map borders.
Tooltips	Off	Allows to display a tooltip for highlighted map elements.
Tooltips: Trigger	none	The user interaction that causes the tooltip to be displayed.
Tooltips: Use HTML	Off	Specifies if the tooltips should use HTML. This allows to customize the tooltips even more. For example, if this property is on, it is possible to display images wihtin the tooltip.

Map template

CSS

#{cssid} circle {
 	 cursor: pointer;
}

HTML

<div id="{cssid}">
  %%map%%
  <div class="value">
    Click on the map!
  </div>
</div>

JavaScript

Executed when a marker/region is clicked.

Click value can be defined for each map element.

jQuery("#" + cssid + " .value").html(click_value);

Map elements (6)

Color	Name	Click Value
	Omaha	Address 2 Another Random Street 12121 51321 Omaha United States
	Wesseling	Address 1 Random Street 12121 87877 Cologne Germany
	Sydney	Address 6 Street 12121 655454 Sydney Australia
	Rio	Address 4 Random Street 454 45554 Rio Brasil
	shanghai	Address 7 Random Street 11000 8951 Shanghai China
	Kapstadt	Address 3 Street 12121 87877 Cape Town South Africa

You can easily import this map to your plugin

Map examples