Create clickable Map use jQuery and SVG

Create clickable Map use – jQuery and SVG Maps Create clickable Map use jQuery and SVG - US States Map SVG zip-code boundary shapes

Find the right SVG – Map

Maps4Office helps you to find the right SVG Map – by Administration Level (Counties, States, Region, Rural Districts,.. ) or by Postcode Areas (Postcode boundary Map – Level 1 till 6). It’s also possible to choose the right projection type – e.g. Mercator (classic for Europe), Lambert (classic Projection for North America) …

Use SVG Map for …

The SVG Vector Maps are excellent for interactive web applications (e.g. Apps, Web-Applications, BI systems as QlikView, Navision or Evidanza). In this quick tutorial we describe you, how to work with the SVG-Maps with the free jQuery library (framework).


The SVG Map is integrated as follows:


<svg version="1.1" id="svgEuropa" xmlns="" xmlns:xlink="" x="0px" y="0px" width="420px" height="594px" viewBox="0 0 210 297" enable-background="new 0 0 210 297" xml:space="preserve">

<polygon id="" .../>
<polygon id="" points="84.502,85.722 86.898,86.056 88.602,86.358... />
<polygon id=""...

jQuery plugin for decorating image maps (highlights, select areas, tooltips): Europe, color states, items hover


Use the SVG-ID (Shape Area) to set your items – it’s not possible to get the polygon id.

$("#svgEuropa [id='']")

Use the CSS-Style to color the shape items:

$("#svgEuropa [id='']").css("fill","#ff0000");

SVG Click on("click",function(, interaction, iso name europe map, onclick event, Hover, Canvas


You can do with the objects whatever you need. You can set events to the object by jQuery – in this example the click event – e.g.


$("#svgEuropa [id='']").on("click",function(){