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.

Interactive Map with Regions of Brazil

This is an example map of Brazil showing all the available regions:

You can execute any JavaScript when a region is clicked. For example, you can replace this text. Please click on one of the regions of Brazil to see it.

The administration panel for this map looks like this:

Our map builder and a map of Brazil Our map builder and a map of Brazil while a region is edited Our map builder and a map of Brazil while editing the map template

This map contains the following regions:

  • Distrito Federal
  • Acre
  • Alagoas
  • Amapá
  • Amazonas
  • Bahia
  • Ceará
  • Espírito Santo
  • Goiás
  • Maranhão
  • Mato Grosso
  • Mato Grosso do Sul
  • Minas Gerais
  • Para (Pará)
  • Paraiba (Paraíba)
  • Paraná
  • Pernambuco
  • Piauí
  • Rio de Janeiro
  • Rio Grande do Norte
  • Rio Grande do Sul
  • Rondônia
  • Roraima
  • Santa Catarina
  • Sao Paulo (São Paulo)
  • Sergipe
  • Tocantins

Our plugin allows to color each region indiviually. You can also specify a custom tooltip and a click value which is passed to the JavaScript code when a region is clicked. In this example the JavaScript code replaces the text below the map. You could also run any other JavaScript code when a region is clicked. We have other examples on our site where the JavaScript code opens a link or shows a lightbox. You only have to replace the JavaScript code and in some cases have to adjust the HTML of the map template. If you need help with this, let us know.

The configurations of this map can be seen here:

Name Value Description
Region Brazil 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 Regions Specifies the display mode of the map.
Border resolution Provinces 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
#{cssid} path[fill="#ffffff"]{
 display: none;
}
#{cssid} path{
  cursor: pointer;
  stroke-width: 1;
  stroke: #3a910e;
}
#{cssid} path:hover {
  fill: #3a910e;
  stroke: #3a840b;
}
#{cssid} .google-visualization-tooltip {
  box-shadow: none;
  white-space: nowrap;
  border-radius: 4px;
}
#{cssid} .google-visualization-tooltip-item {
  padding: 0 1em;
}
#{cssid} em {
  display: inline-block;
  padding: 10px;
}
HTML
<div id="{cssid}">
  %%map%%
  <em>You can execute any JavaScript when a region is clicked. For example, you can replace this text.
    Please click on one of the regions of Brazil to see it.</em>
</div>

JavaScript

Executed when a marker/region is clicked.

Click value can be defined for each map element.

jQuery("#" + cssid + " em").html("You clicked on <strong>" 
                                 + click_value 
                                 + "</strong>. Instead of replacing this text, you could also open a link.");
Color Name Click Value
BR-DF Distrito Federal
BR-AC Acre
BR-AL Alagoas
BR-AP Amapá
BR-AM Amazonas
BR-BA Bahia
BR-CE Ceará
BR-ES Espírito Santo
BR-GO Goiás
BR-MA Maranhão
BR-MT Mato Grosso
BR-MS Mato Grosso do Sul
BR-MG Minas Gerais
BR-PA Pará
BR-PB Paraíba
BR-PR Paraná
BR-PE Pernambuco
BR-PI Piauí
BR-RJ Rio de Janeiro
BR-RN Rio Grande do Norte
BR-RS Rio Grande do Sul
BR-RO Rondônia
BR-RR Roraima
BR-SC Santa Catarina
BR-SP São Paulo
BR-SE Sergipe
BR-TO Tocantins

Comments

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


  • Elisandro Borges

    Wow! That is so cool!

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.