Maps made easy

Map examples

All map examples were generated with our plugin. Most examples can be imported directly to your plugin. A download button can be found at the end of each example page.

Map of Europe with HTML in a Lightbox

This is a sample map of Europe that opens a lightbox when you click on one of the markers:

Map of our stores in Europe. Click on one of the markers to see the locations in these cities.

This is how the administration panel looks like:

lightbox-map lightbox-map2-2 lightbox-map3

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.

Continue reading

Use Markers and Colored Regions on one Map

The following example illustrates how you can mix two display modes:

Normally, the plugin won’t allow to use markers and colored regions on one map. This is mainly due to the Google Geochart API. Since there is no way to achieve this by natively using the API, we will have to create two seperate maps. We use CSS to position the maps over each other. At the end you will have a map that looks like the one from above.

If you want to use this technique on your site, then you can do the following:

  1. Import both maps from below. Simply click on the download button and follow the instructions there.
  2. Once this is done, insert the maps on site (pages, posts, etc.) by using the following HTML. Please note that the order of the shortcodes is important. The first shortcode is the regions map and the second the markers map. Please make sure to insert the correct ids for the maps. :
    <div id="mixed_display_modes">
       <div class="region_map">
          [interactive_map id="102"]
       </div>
       <div class="marker_map">
          [interactive_map id="103"]
       </div>
    </div>
    
  3. It is also necessary to make sure that the following styles are applied. If you import the maps from below, you can skip this step since you won’t need to add the following CSS. They are already included in the map template of the markers map. If you want to use this technique with already existing maps, then make sure that you use the following CSS (together with the HTML from before):
    #mixed_display_modes {
      position: relative;
    }
    #mixed_display_modes .marker_map {
      position: absolute;
      width: 100%;
      pointer-events: none;
      top: 0;
    }
    #mixed_display_modes .marker_map text,
    #mixed_display_modes .marker_map circle {
      pointer-events:visible; 
    }
    #mixed_display_modes .marker_map path {
       display: none;
    }
    #mixed_display_modes .marker_map rect {
       fill: transparent;
    }
    

You can also use a different region after the import. You only have to make sure that you use the same regions on both maps.

The map configuration of both maps can be found here:

Name Value Description
Region United States 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 350 Height of the map in pixel. 'Auto' means that the map is centered in the available height.
Display mode Regions Specifies the display mode of the map.
Border resolution Provinces 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.
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;
}

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>

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
US-TX

Texas

Texas /ˈtɛksəs/ (Spanish: Tejas [ˈtexas]) is the second most populous and second largest state of the United States of America. Geographically located in the south central part of the country, Texas shares an international border with Mexico to the south and borders the U.S. states of New Mexico to the west, Oklahoma to the north, Arkansas to the northeast, and Louisiana to the east. Texas has an area of 268,820 square miles (696,200 km2) and a growing population of over 26.9 million residents (July 2014).

US-SC

South Carolina

South Carolina Listeni/ˌsaʊθ kærəˈlaɪnə/ is a state in the southeastern United States, bordered to the north by North Carolina, to the south and west by Georgia across the Savannah River, and to the east by the Atlantic Ocean. The Province of South Carolina became a slave society after rice and indigo became established as commodity crops. From 1708, a majority of the population were slaves, many born in Africa.

US-IL

Illinois

Illinois (Listeni/ˌɪlɨˈnɔɪ/ IL-i-NOY) is a state in the Midwestern United States. It is the 5th most populous state and 25th largest state in terms of land area, and is often noted as a microcosm of the entire country.[6] With Chicago in the northeast, small industrial cities and great agricultural productivity in central and northern Illinois, and natural resources like coal, timber, and petroleum in the south, Illinois has a diverse economic base and is a major transportation hub.

US-FL

Florida

Florida Listeni/ˈflɒrɪdə/ is a state in the southeast United States, bordered to the west by the Gulf of Mexico, to the north by Alabama and Georgia, to the east by the Atlantic Ocean, and to the south by the Straits of Florida. Florida is the 22nd most extensive, the 3rd most populous,[4] and the 8th most densely populated of the United States. Jacksonville is the most populous city in Florida, and the largest city by area in the contiguous United States. The Miami metropolitan area is the eighth-largest metropolitan area in the United States. Tallahassee is the state capital.

US-GA

Georgia

Georgia (Listeni/ˈdʒɔrdʒə/ JOR-juh) is a state located in the southeastern United States. It was established in 1732, the last of the original Thirteen Colonies.[4] Named after King George II of Great Britain,[5] Georgia was the fourth state to ratify the United States Constitution, on January 2, 1788.[6] It declared its secession from the Union on January 19, 1861, and was one of the original seven Confederate states.[6] It was the last state to be restored to the Union, on July 15, 1870.[6] Georgia is the 24th largest and the 8th most populous of the 50 United States.

Name Value Description
Region United States 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 350 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 Provinces 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.
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;
}

body .featherlight {
    z-index: 10000 !important;
}

#mixed_display_modes {
  position: relative;
}
#mixed_display_modes .marker_map {
  position: absolute;
  width: 100%;
  pointer-events: none;
  top: 0;
}
#mixed_display_modes .marker_map text,
#mixed_display_modes .marker_map circle {
  pointer-events:visible; 
}
#mixed_display_modes .region_map {

}
#mixed_display_modes #{cssid} path {
   display: none;
}
#mixed_display_modes #{cssid} rect {
   fill: transparent;
}
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>

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
Los Angeles

Los Angeles

Los Angeles (Listeni/lɒs ˈændʒəlɨs/ loss AN-jə-ləs),[14] officially the City of Los Angeles and often known by its initials L.A., is the second-largest city in the United States, the most populous city in the U.S. state of California, and the county seat of Los Angeles County. Situated in Southern California, Los Angeles is known for its mediterranean climate, ethnic diversity, sprawling metropolis, and as a major center of the American entertainment industry. Los Angeles lies in a large coastal basin surrounded on three sides by mountains reaching up to and over 10,000 feet (3,000 m).

San Francisco

San Francisco

San Francisco (/sæn frənˈsɪskoʊ/), officially the City and County of San Francisco, is the cultural, commercial, and financial center of Northern California and the only consolidated city-county in California.[24] San Francisco encompasses a land area of about 46.9 square miles (121 km2)[25] on the northern end of the San Francisco Peninsula, which makes it the smallest county in the state. It has a density of about 18,187 people per square mile (7,022 people per km2), making it the most densely settled large city (population greater than 200,000) in the state of California and the second-most densely populated major city in the United States after New York City.

Search

Responsive? Yes!

Our maps are fully responsive. They automatically fit into the available width. Try it by resizing your browser window.

Did you know…

  • All examples are importable to your plugin.
  • We extend our set of examples from time to time. If you think there is an example missing, write us a message and we will try to add it!

User reviews

  • Best map-plugin I could find.
  • Great support. Real fast response. This was exactly what I needed. Very flexible and useful.
  • Was waiting for plugin like this for ages! Customer support is also great.
  • Customer support is excellent and very quick. I have no hesitation in recommending this product.

Example for a sidebar map


All maps can also easily be added to your sidebar.