This is a sample map of Europe that opens a lightbox when you click on one of the markers:
This is how the administration panel looks like:
This map example uses Featherlight which is a very lightweight jQuery lightbox plugin. You won’t need to install any additional WordPress plugins to use this map and the lightbox on your site. The lightbox should work without any problems.
The JavaScript code for this map is quite simple. The following line is executed, when a marker is clicked:
jQuery.featherlight(click_value);
The click_value simply contains the HTML for each marker. This HTML will be used for the inner content of the lightbox.
If you are already using a lightbox on your site, you can also replace Featherlight by your own. You will only have to change the one line of JavaScript code from above and insert the function from your lightbox. If this works, you can also delete the first four lines of HTML in the map template. They are used to include the Featherlight code. The map template can be seen in the box below. If you need assistance with this, please write us and we will try to provide help.
The map configuration can be found here:
| Name | Value | Description |
|---|---|---|
| Region | Europe | 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 | On | Allows to display a tooltip for highlighted map elements. |
| Tooltips: Trigger | focus | The user interaction that causes the tooltip to be displayed. |
| Tooltips: Use HTML | On | 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. |
| CSS | .map-lightbox h1 {
margin-top: 0;
}
.featherlight-content {
border-radius: 5px;
}
.address_wrap {
padding-bottom: 20px;
}
.address_wrap a {
font-weight: bold;
color: #535099;
}
#{cssid} .tooltip-title {
white-space: nowrap;
text-align: center;
}
#{cssid} .google-visualization-tooltip {
border-radius: 20px;
}
#{cssid} .google-visualization-tooltip-item {
padding: 0 15px;
}
#{cssid} circle {
cursor: pointer;
}
#{cssid} {
width: 100%;
padding: 10px;
margin: 0 0px;
background-color: #f5f5f5;
border-radius: 10px;
}
#{cssid} .map_caption {
font-size: 11px;
padding-left: 6px;
padding-top: 6px;
}
body .featherlight {
z-index: 10000 !important;
} |
|
| HTML | <!-- Featherlight CSS -->
<link href="//cdn.rawgit.com/noelboss/featherlight/1.0.2/release/featherlight.min.css" type="text/css" rel="stylesheet" title="Featherlight Styles" />
<!-- Featherlight JavaScript -->
<script src="//cdn.rawgit.com/noelboss/featherlight/1.0.2/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
<div id="{cssid}">
%%map%%
<div class="map_caption">
<strong>Map of our stores in Europe.</strong> Click on one of the markers to see the locations in these cities.
</div>
</div> |
|
|
JavaScript Executed when a marker/region is clicked. Click value can be defined for each map element. |
jQuery.featherlight(click_value); |
|
| Color | Name | Click Value |
|---|---|---|
| Berlin | ||
| Paris |
Comments
If you need help or have questions, please leave a comment.