Responsive World Map WordPress - Interactive Map Builder

This example shows a responsive world map.

The tooltips contain basic HTML. In this example map they show the address, the store hours and some additional information. If you want to use similar HTML in your tooltips you can use the follwing code snippet:

<div style="width:330px;">
   <table style="border: none;">
      <tr>
         <td style="border: none;">
            <strong>Our STORE in Shanghai</strong><br>
            223 Xikang Road<br>
            200040 Shanghai, China
         </td>
         <td style="border: none; text-align: right;">
            <strong><i>Store hours</i></strong><br>
            <strong>Monday - Friday</strong> 6am - 9pm<br>
            <strong>Saturday</strong> 6am - 9pm<br>
            <strong>Sunday</strong> <span style="color: red;">closed</span>
         </td>
      </tr>
   </table>

   <strong>Store services</strong> <a href="#">See more services and hours</a><br>
   <span class="bblock">Pharmacy</span>
   <span class="bblock">Site-to-Store</span>
   <span class="bblock">Grocery</span>
</div>

This example contains two methods to add CSS stylings to the tooltip. One way is to use the “style” attribute. Another way is to add the styles to the CSS of the map template. Note that the tooltip width is set to 330px in this example. If the screen width is smaller than 330px, the tooltips will get cut off. This can be avoided by choosing a smaller width or by defining different styles for a given width.

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	On	Allows to display a tooltip for highlighted map elements.
Tooltips: Trigger	selection	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.

Map template

CSS

#{cssid} .bblock {
  background-color: #e1e1e1;
  border-radius: 3px;
  padding: 2px 4px;
  margin-right: 5px;
  
 
}
#{cssid} a {
  color: #007dc6;
}
#{cssid} .services {
  padding: 5px 0;
}
#{cssid} .google-visualization-tooltip-item {
 padding: 0 1em 0 1em;
  font-size: 12px !important;
}
#{cssid} .click-content {
 width: 600px;
  margin: 0 auto;
  height: 100px;
}
#{cssid} .google-visualization-tooltip-item table {
 	width: 100%; 
}
#{cssid} circle {
 	cursor: pointer; 
}

HTML

<div id="{cssid}">
  %%map%%
  <div class="click-content">
    
  </div>
</div>

JavaScript

Executed when a marker/region is clicked.

Click value can be defined for each map element.

jQuery("#" + cssid + " .click-content").html(click_value);

Map elements (3)

Color	Name	Click Value
	New york
	Köln
	Shanghai

You can easily import this map to your plugin

Map examples

Back to the map examples

Responsive World Map for WordPress

Comments

Search

Responsive? Yes!

Did you know…

User reviews

Example for a sidebar map