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.

Login

Interactive US Map with State Names

2 Comments United States
Download this map
Please click on one of the states.

This is customized US map that shows all state names and displays HTML below the map when a text marker is clicked. You change the region of this map to create a similar map of any other country.

To import this map, please use the download button from below. If you want to open a link when a marker is clicked, please click on the “Map Template” bar and have a look at the JavaScript. This is the third text field. There you will already find predefined code for opening links in the same or a new window. You only have to delete the “//” in front of the corresponding line. Please don’t forget to delete or put new “//” in front of the old code. If you want to execute other actions, please send us a message and we will provide you the needed code.

If you want to activate tooltips (HTML tooltips are also possible) or want to change the font size of the text marker, you can do this in the map builder as usual.

You can also replace the text by your own. For example, you could also use abbreviations for the states:

Please click on one of the states.

This is the configuration of the first map:

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 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 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 
#{cssid} text {
 fill: #444444;
}
#{cssid} text:hover {
 fill: #428bca;
}
#{cssid} text[stroke-width="3"] {
 display: none;
}
HTML 
<div id="{cssid}">
  %%map%%
  
  <!-- (1)   For showing HTML below the map: -->
  
  <div class="value">
    <em>Please click on one of the states.</em>
  </div>
  
  
</div>

<script>
  jQuery(function() {
    var id = parseInt("{cssid}".substring(5));
    map_generator["maps"][id]["options"]["displayMode"] = "text";
    if(test_top_object_exists("default_options")) {
      top["default_options"]["displayMode"] = "text";
      
      jQuery(".color_column, li.colorpicker_parent", top.document).hide();
      jQuery(".text_label", top.document).show();
      jQuery("#optionbox_displaymode", top.document).hide();
      jQuery("label.hide_in_textmode.hide_for_htmltooltips", top.document).hide();
      jQuery("li.top_bottom > label.show_in_textmode", top.document).eq(0).show();
      jQuery("br.show_in_textmode", top.document).show();
      jQuery("label.show_in_textmode.hide_for_htmltooltips", top.document).show()
      jQuery("#data_form_tooltip_title", top.document)
         .attr("style", "display: block !important");
      jQuery(".box_body .top_bottom label.hide_in_textmode.hide_for_htmltooltips")
         .hide();
      jQuery("small.left_space", top.document).hide();
      jQuery("#template_description", top.document)
         .css("color", "red")
         .html('<small>Please don\'t change this template. '
                       + 'It\'s highly customized for showing text at specific coordinates. '
                       + 'If you want open a link or display HTML, have a look '
                       + 'at the JavaScript in the last text field and follow the instructions there. '
                       + 'For everything else, please send a message to '
                       + "<a href=\"mailto:info@meisterpixel.com\">info@meisterpixel.com</a> "
                       + 'and we will provide you the needed code. '
                       + 'We usually reply within 24h.</small>');
    }
  });
  
  function test_top_object_exists(name) {
    try {
      if(typeof top == "object" && typeof top[name] == "object") {
        return true;
      }
    } catch(err) {
      return false;
    }
    return false;
  }
  
</script>

JavaScript

Executed when a marker/region is clicked.

Click value can be defined for each map element.

 
// Please remove the '//' in front of the corresponding line.

// (1)   For showing HTML below the map:
//       Please also uncomment the corresponding HTML.
jQuery("#" + cssid + " .value").html(click_value);

// (2)   For opening a link in a the same window:
// window.location = click_value;

// (3)   For opening a link in a new window:
// window.open(click_value);
Color Name Click Value
CA This will be the information for California
Oregon This will be the information for Oregon
Nevada This will be the information for Nevada
Alaska This will be the information for Alaska
Wenatchee, Washington This will be the information for Washington
Idaho This will be the information for Idaho
Phoenix, Arizona This will be the information for Arizona
Utah This will be the information for Utah
New Mexico This will be the information for New Mexico
Texas This will be the information for Texas
Hawaii This will be the information for Hawaii
Montana This will be the information for Montana
Wyomin This will be the information for Wyoming
Pike National Forest, Colorado This will be the information for Colorado
Nebraska This will be the information for Nebraska
Great Bend, Kansas This will be the information for Kansas
Oklahoma This will be the information for Oklahoma
Pierre, South Dakota This will be the information for South Dakota
North Dakota This will be the information for North Dakota
Minnesota This will be the information for Minnesota
Stevens Point, Wisconsin This will be the information for Wisconsin
Ames, Iowa This will be the information for Iowa
MIssouri This will be the information for Missouri
Illinois This will be the information for Illinois
Indianapolis, Indiana This will be the information for Indiana
Ohio This will be the information for Ohio
Lansing, Michigan This will be the information for Michigan
Brookville, Pennsylvania This will be the information for Pennsylvania
Rochester, New York This will be the information for New York
Fairlee, Vermont This will be the information for Vermont
Maine This will be the information for Maine
Isles of Shoals, New Hampshire This will be the information for New Hampshire
41.034668, -72.608764 This will be the information for Connecticut
Massachusetts This will be the information for Massachusetts
Rhode Island This will be the information for Rhode Island
Florida This will be the information for Florida
Georgia This will be the information for Georgia
Birmingham, Alabama This will be the information for Alabama
Louisiana This will be the information for Louisiana
Mississippi This will be the information for Mississippi
Myrtle Beach, South Carolina This will be the information for South Carolina
North Carolina This will be the information for North Carolina
Nashville, Tennessee This will be the information for Tennessee
Elizabethtown, Kentucky This will be the information for Kentucky
Virginia This will be the information for Virginia
Arbuckle, WV, USA This will be the information for West Virginia
Delaware This will be the information for Delaware
Washington D.C. This will be the information for DC
New Jersey This will be the information for New Jersey
Elkton, Maryland This will be the information for Maryland
Arkansas This will be the information for Arkansas
You can easily import this map to your plugin

This is the configuration of the second map:

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 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 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 
#{cssid} text {
 fill: #444444;
}
#{cssid} text:hover {
 fill: #428bca;
}
#{cssid} text[stroke-width="3"] {
 display: none;
}
HTML 
<div id="{cssid}">
  %%map%%
  
  <!-- (1)   For showing HTML below the map: -->
  
  <div class="value">
    <em>Please click on one of the states.</em>
  </div>
  
  
</div>

<script>
  jQuery(function() {
    var id = parseInt("{cssid}".substring(5));
    map_generator["maps"][id]["options"]["displayMode"] = "text";
    if(test_top_object_exists("default_options")) {
      top["default_options"]["displayMode"] = "text";
      
      jQuery(".color_column, li.colorpicker_parent", top.document).hide();
      jQuery(".text_label", top.document).show();
      jQuery("#optionbox_displaymode", top.document).hide();
      jQuery("label.hide_in_textmode.hide_for_htmltooltips", top.document).hide();
      jQuery("li.top_bottom > label.show_in_textmode", top.document).eq(0).show();
      jQuery("br.show_in_textmode", top.document).show();
      jQuery("label.show_in_textmode.hide_for_htmltooltips", top.document).show()
      jQuery("#data_form_tooltip_title", top.document)
         .attr("style", "display: block !important");
      jQuery(".box_body .top_bottom label.hide_in_textmode.hide_for_htmltooltips")
         .hide();
      jQuery("small.left_space", top.document).hide();
      jQuery("#template_description", top.document)
         .css("color", "red")
         .html('<small>Please don\'t change this template. '
                       + 'It\'s highly customized for showing text at specific coordinates. '
                       + 'If you want open a link or display HTML, have a look '
                       + 'at the JavaScript in the last text field and follow the instructions there. '
                       + 'For everything else, please send a message to '
                       + "<a href=\"mailto:info@meisterpixel.com\">info@meisterpixel.com</a> "
                       + 'and we will provide you the needed code. '
                       + 'We usually reply within 24h.</small>');
    }
  });
  
  function test_top_object_exists(name) {
    try {
      if(typeof top == "object" && typeof top[name] == "object") {
        return true;
      }
    } catch(err) {
      return false;
    }
    return false;
  }
  
</script>

JavaScript

Executed when a marker/region is clicked.

Click value can be defined for each map element.

 
// Please remove the '//' in front of the corresponding line.

// (1)   For showing HTML below the map:
//       Please also uncomment the corresponding HTML.
jQuery("#" + cssid + " .value").html(click_value);

// (2)   For opening a link in a the same window:
// window.location = click_value;

// (3)   For opening a link in a new window:
// window.open(click_value);
Color Name Click Value
CA This will be the information for California
Oregon This will be the information for Oregon
Nevada This will be the information for Nevada
Alaska This will be the information for Alaska
Wenatchee, Washington This will be the information for Washington
Idaho This will be the information for Idaho
Phoenix, Arizona This will be the information for Arizona
Utah This will be the information for Utah
New Mexico This will be the information for New Mexico
Texas This will be the information for Texas
Hawaii This will be the information for Hawaii
Montana This will be the information for Montana
Wyomin This will be the information for Wyoming
Pike National Forest, Colorado This will be the information for Colorado
Nebraska This will be the information for Nebraska
Great Bend, Kansas This will be the information for Kansas
Oklahoma This will be the information for Oklahoma
Pierre, South Dakota This will be the information for South Dakota
North Dakota This will be the information for North Dakota
Minnesota This will be the information for Minnesota
Stevens Point, Wisconsin This will be the information for Wisconsin
Ames, Iowa This will be the information for Iowa
MIssouri This will be the information for Missouri
Illinois This will be the information for Illinois
Indianapolis, Indiana This will be the information for Indiana
Ohio This will be the information for Ohio
Lansing, Michigan This will be the information for Michigan
Pennsylvania This will be the information for Pennsylvania
Lebanon, NY This will be the information for New York
Vermont This will be the information for Vermont
Maine This will be the information for Maine
New Hampshire This will be the information for New Hampshire
41.034668, -72.608764 This will be the information for Connecticut
Massachusetts This will be the information for Massachusetts
Rhode Island This will be the information for Rhode Island
Florida This will be the information for Florida
Georgia This will be the information for Georgia
Alabama This will be the information for Alabama
Louisiana This will be the information for Louisiana
Mississippi This will be the information for Mississippi
South Carolina This will be the information for South Carolina
North Carolina This will be the information for North Carolina
Tennessee This will be the information for Tennessee
Kentucky This will be the information for Kentucky
Virginia This will be the information for Virginia
WV, USA This will be the information for West Virginia
Delaware This will be the information for Delaware
Washington D.C. This will be the information for DC
39.884265, -73.138098 This will be the information for New Jersey
Elkton, Maryland This will be the information for Maryland
Arkansas This will be the information for Arkansas
You can easily import this map to your plugin

Comments

If you need help or have questions, please leave a comment.


  • andrea telatin

    What if i’d like to open a post upon click?

    • http://meisterpixel.com meisterpixel

      The example map is already prepared to do that. If you import one of the maps from above, you can click on “Map Template” and uncomment the corresponging line in the JavaScript code. Please note that you have to put “//” in front of the existing line. If you are done with editing, you only have to press “Update Preview”. If you have questions or need more help with this, let me know!

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.
    from BreNet on CodeCanyon
  • Great support. Real fast response. This was exactly what I needed. Very flexible and useful.
    from ccseva on CodeCanyon
  • Was waiting for plugin like this for ages! Customer support is also great.
    from nevedel on CodeCanyon
  • Customer support is excellent and very quick. I have no hesitation in recommending this product.
    from gigaman on CodeCanyon

Example for a sidebar map


All maps can also easily be added to your sidebar.