Discussion on MapSVG - interactive vector maps & floorplans with directory, search, filters - WordPress plugin


RomanCode supports this item


This author's response time can be up to 5 business days.

817 comments found.

I can do so on the map: 1 select another color are the country that I want? 2 put a check on those countries where I want?

when I buy premium can I use this plugin on several of their sites?

Здравсвуйте, если возможно, напишите 1ый и 2ой вопросы по-русски – не понял, что вы спрашиваете. Насчет вопроса номер 3 – лицензия CodeCanyon позволяет использовать плагин только на 1 сайте.

Pre-purchase Questions:

- Can information be displayed related to the clicked area of the map. For example, if I click on new york, I can get a population count (that I input) etc? I want to say yes based on the left hand side information on your live demo.


Hi, yes that is possible! You would need to add cities into MapSVG database along with their information (name of the city, population, etc.). And then you can show information in 3 ways: 1) as a tooltip appearing on mouse hover 2) as a small pop-up info box (“popover”) appearing on click 3) as a large detail view covering the whole map or in any custom container located somewhere else on the page (you need to provide container ID).


milesg Purchased

Hi, I bought your plugin yesterday and it’s superb! It has saved me days of time already creating an interactive site plan for a new housing development. One quick question I have is… is it possible to simulate a “click” on a map region from outside the map (programmatically with javascript)?

I have a map showing properties and underneath a table of properties. When a user clicks the buliding in the HTML table how can I make the popup for the appropriate region show on the map?


Thanks for your good feedback! :)

How do you generate the list of properties? Do you use MapSVG “Directory” functionality for that? If so, then you can do the next:
MapSVG > Your map > Actions > Directory item click > Trigger popover action on associated Region

milesg Purchased

Hi, no I’m not using the built in directory because we want to list the units by phase of development (there will be three columns of “units”, each column corresponds to a phase), when the user clicks a units we want to show the popover on that unit/region on the map.

OK then first you would need to store region ID inside of your DOM object (is it link?), for example you can use “data-region-id” parameter:
<a class="region-link" href="..." data-region-id="US-TX">link text</a>

Also note that I added “region-link” class name. You can use another class name if you want.

Then you need to get region ID from clicked link, get Region object from MapSVG by ID, get center point of that region and then show popover at that point. You can add the code below into “afterLoad” event handler of MapSVG:
  var mapsvg = this; 
  jQuery('body').on('click', '.region-link', function(e){
    var regionID = jQuery(this).data('region-id');
    var region = mapsvg.getRegion(regionID);
    var center = region.getCenter();
    e.clientX = center[0];
    e.clientY = center[1];
    var content = mapsvg.getData().templates.popoverRegion(region);
    mapsvg.showPopover(e, content);

    // if you want to select region as well:

Hi, using the included maps and keep getting this: “MapSVG needs width/height or viewBox parameter to be present in SVG file.” I checked the svg file and it has width and height in the svg tag. I’m using the wordpress plugin—what am I missing?

Hi, that error could be caused by other things as well (do you use IIS server?). Please provide access to your WordPress so I could check by myself what’s wrong. Please mail me your credentials from the “support” section.

Hi, I installed it on a fresh install of wordpress and it works. Sending you a support ticket. Thanks

Hi, I can’t get the Directory Item Action Click to work. I see the database items in the directory. I see the markers on the map. Marker popup works when I click a marker. I have Trigger Click Event for associated marker for Directory Item Click - but when I click on the directory item nothing happens.

What am I missing?

Also, I have a text field in database set to search. The text field only contains numbers but search doesn’t seem to reference the field or perhaps search doesn’t look at numbers?

Hi, let’s keep support conversation in email. I’ll reply to your mails there now.


Parelles Purchased

Hi Roman, can’t get any response through email support so I’m trying through comments.

My question relates the the different regions shown on the Spain geo-calibrated and Spain non-calibrated maps.

I want to use the regions from the geo-calibrated maps on the Spain non-calibrated map. Is this possible? If so how?

The reason is the Canary Islands distort the geo-calibrated map as they are so far from the mainland so the map has a lot of white space.

Hi, please check this path on your server:
do you see your svg file there?

Parelles Purchased

No, there is no mapsvg folder in /wp-content/uploads/

Probably /wp-content/uploads isn’t writable then. Change its permissions to 777 and try to upload the map again in MapSVG. And what is your version of MapSVG? With 3.x version you should see a success message after uploading – “the map was uploaded successfully”. If changing permissions wouldn’t help then I would need to get access to your WordPress (send me your credentials through support form) – https://codecanyon.net/item/mapsvg-responsive-vector-maps-floorplans-with-directory-search-filters/2547255/support

Can we create separate map for particular state Ex: Hungary => Budapest

i.e we need separate map for Budapest, is it possible?

Hi, yes that is possible. You can download this SVG map of Budapest for example and upload it into MapSVG: https://upload.wikimedia.org/wikipedia/commons/4/4c/Budapest_districts_map.svg

Hi Thanks for the quick reply, I also want you to look at below requirement which consist of Itineraries (i.e: need to show a planned route or journey)

” When you click on the pinpoint, a regional map will display, and a brief description of the tours will display in the right hand slide panel, ( example . 5 day Tuscany Treasures, including Florence, San Giminano, Assisi, and Siena.) and a series of Itineraries ( 2 or 3) will display on the regional map, in different colours

Below are the tours:
  1. 1 x Tour ( Pinpoint) in South West Ireland ( Regional Map of Ireland), # 2 Tours (Pinpoints) in UK ( Regional Map of UK) consisting of 1 x Tour in Scotland and 1 x tour in Cotswalds, Devon and Cornwall, # 2 Tours (Pinpoints) in Italy (Regional Map of Northern and Central Italy, ie Swiss Border to Naples) Consisting of 1 x Tour Florence and Tuscany and 1 x Tour Rome and Amalphi Coast. # 1 Tour in Croatia ( Regional Map to Include Slovenia and Croatia and Montenigro , ie Venice in the North to Kotor in the South) consisting of 1 Tour in The South. “

Hi, if you need to show routes (lines) on the map, MapSVG can’t draw them automatically. However you could draw the routes manually in vector editing software and then show / hide those routes using javascript and MapSVG event handlers. Also if you need detailed regional maps (for example map of Budapest as in example above) then you would need to find them online or draw them yourself. What MapSVG can do: add markers (pinpoints), show detailed description on click on a marker in a popover or in a large “details view”.

I ask sb to buy mapsvg for me. How can I recognize the real package have been bought from original site? there is a cheat. when I write alert(‘1’) on javascript>region.click nothing save.

Hi, you need to write full function, not just alert(1):

If JS code in the input field of event handler is incorrect, field wouldn’t save. Otherwise the whole plugin would stop working on the front-end when there is error in JS code.

And you need to have access to the account from which the plugin was purchased – otherwise you won’t be able to receive important updates which are free. You need to download updates only from CodeCanyon, there are no automatic updates for MapSVG.

thank you very much!


I have been playing around trying to get my map to function as i want it to. I am using the UK Counties map and would like to have a pop-over appear when clicking on a Region. I have created the fields to display a title and a decription and then added the handlebars to the Templates area eg. {{area_title}} and put in every template dropdown. When i click on the region though, I just see a full height cream coloured box appear to the left with nothing in it. When I enable the Directory too by Region, the text isn’t there, but if you hover down the list it’s highlighting empty blocks. http://dev2.createservers.co.uk/artificial/local-installation/

(tried disabling all plugins/using 2017 theme too)



I opened your link but there is another map plugin. Do you still need any help? If so, did you read this tutorial? – http://mapsvg.com/tutorials/3.x/2/

If {{area_title}} is your custom field of a Region then you should access it via “data” property:

shkou Purchased


First of all, thank you for this fantastic plugin!

I have few questions that I post here in comments because I guess it would be useful for other users.

  • I have a map of France with dealers. Each dealer is associated with many regions. It is a bit tedious to copy / paste the same object for all regions in the admin. Do you plan to update the plugin to allow an object to be associated with several regions?
  • As a result, I have a lot of duplicate objects. For now, how can I avoid duplicates in the directory list?
  • I’ve chosen “Data source: Database” because I need to pass database objects to the Details View template when the user click on a directory item. I can show region ID but I’d prefer show Region Title instead. How can I do that last trick? Do I have to create a new field and copy titles manually?



1) I’m already working on adding that feature because a few other people also asked about the same thing. Contact me through support link and I’ll send you update before official release on CodeCanyon; 2) Not possible yet, sorry; 3) I’ll add ”.region” object reference into the next update so you would be able to do the next after passing DB object into a template:

shkou Purchased

Great, thank you very much!


chabo1551 Purchased

Hi Roman, sorry to go from this forum but because you didn’t answer the last emails, Maybe you have issue with the Emails.

I need to know if you think you will fix I flag you.

First, I really need to be able to select content, use a finger on mobile and tablet. Right now, when we are over the popovers, we control the map behind. Is it a Javascript who do this?

It happen as soon it’s under this structure

For the background I use CSS code.

Also, have the issue with the mini-icon when the map is bigger than 800px. Firefox, chrome or edge. All the same issue.

So, in a full width Website, it look pretty weird :)

Last thing, did you fix your code mirror Editor issue on the Regions HTML TextArea box? It’s still not working for the html. Unless you give us the opportunity to use a POST article, this need to be fix.

We spend 1 month working on this plugins, my deadline is approching and I still cannot start my content entry.

Thanks, Mathieu

Hi Mathieu, please check your mail. There were problems with mail delivery (and for one another customer as well). Looks like mail servers don’t like .JS files in attachment.


I’m trying to create a custom map. I was wondering which coordinate reference system you use in the maps like Venezuela.

So far I have created my SVG but the coordinates are not shown in latitude and longitude.

Thanks in advance.

Hi, if you want to use lat/lon coordinates on a custom map then you need to calibrate it. Open any of built-in geo-calibrated maps in a text editor and find “mapsvg:geoViewBox” attribute to see how it should look. Example from the map of Brazil:
mapsvg:geoViewBox="-74.008595 5.275696 -34.789914 -33.743888"
Those numbers are left/top/right/bottom coordinates of the map. Also you will need to add the next parameter into <svg> tag:
Without it “mapsvg:geoViewBox” parameter wouldn’t work.

If map is not calibrated then it is possible to add markers manually only – with mouse pointer, by clicking on any point on the map while editing database record with added “Marker” field.

I tried the mapsvg:geoViewBox but then the map would dissapear (in case of the plugin it just stays loading). Has this ever happened to you before?

I solved it by using QGIS to export the SVG (using the SimpleSVG plugin). Thanks for your tips as well, it confirmed my supposition of the mapsvg paramenters.

I have bugs to report:

1) I can’t place a marker using the coordinates alone. It will always look for an address and if I save it just with the coordinates, it will save empty, therefore no pin. We should have the option of just coordinates so we can point to very specific locations. I will add them directly to the DB (and resave them each time, so MapSVG calculates it’s own x and y values) but I would like a non-developer person could use this without having to update the DB directly.

Image: http://turpialdev.com/miconvive/wp-content/uploads/Bug-2.png

2) When I add help text in a textarea, the latter breaks (check image http://turpialdev.com/miconvive/wp-content/uploads/Bug-1.png ) by not showing the text pointer and writing over the number. This is when creating. When editing, the information I added won’t show unless I click on it.

Additionally, I noticed that in the DB, the field region_id_text is NULL, even though I have a title attribute in the SVG file for each path. What’s that field for?




Thanks for reporting!

Bug #2 (textarea): Already fixed! Please contact me through email (use support link – https://codecanyon.net/item/mapsvg-responsive-vector-maps-floorplans-with-directory-search-filters/2547255/support ) – and I’ll send you the fixed version of MapSVG.

Bug #1 (coordinates) & bug #3 (region_id_text field) – I will fix that in one of future releases in February / beginning of March.


yibman Purchased

Hi Romancode I have just purchased your plugin, but I have one big problem. It is not possible to chose markers when I have created a map. The tab is not even active. It is not possible to choose it from menu either.


Markers are representation of Database Objects.

What that means: for example, if you need to show office locations on the map as Markers, you have to add Database Structure with fields describing an office:
(text) address
(text) email
(text) phone
(marker) marker
Last field would let you to add a Marker while you add a record for an office into Database. “Edit markers” button would also become active when you edit a Database record.

Can I input radius around a map location with this plugin? I can currently do this on my own with “Google My Maps”. I do this by using this website: https://www.freemaptools.com/radius-around-point.htm to create a KML file and then import it into a map I have created with “Google My Maps”.

Hi, no that’s not possible yet. Could you tell what do you need this for? If you explain then that feature may be added into development.


Arkanite Purchased

Hello RomanCode. I was using the V2 of your pretty awesome extension. Unfortunately since V3 i can’t put links on regions. I have looked in the documentation / tutorials / comments here but nothing.

In the V2 it was ultra easy, there was a “link” input in “Regions” but it has disappeared since update T.T

Thanks for your help!


Arkanite Purchased

Edit! Found the new way to do it thanks to your new V3 tutorials. If people are lookign for it : http://preview.codecanyon.net/item/mapsvg-responsive-vector-maps-floorplans-with-directory-search-filters/full_screen_preview/2547255



I’m glad you managed it! There is tutorial for V3 about links: http://mapsvg.com/tutorials/3.x/1/

Hello Roman,

I have a few more bugs to report. If you change the Preloader text, it won’t show the change. The same applies to the Search input placeholder, you can change the text but it won’t show the change.

Additionaly, it would be useful to have a way to decide the order in which the markers appear, so they don’t accidentaly overlap each other and mess the visualization of all the markers when they are too close. Check this image http://turpialdev.com/miconvive/wp-content/uploads/Bug-3.png to see what I mean: notice that there is a overlapped marker.

Thanks in advance,


Hi Melvin,

Thanks for the bug report, I tested “Preloader text” and it seems to be working fine. “Search placeholder” isn’t working – you’re right. I fixed that bug and if you want to get the fix as soon as possible – please contact me through support link (email) and I’ll send you changed files. And if “Preloader text” still doesn’t work on your website – please provide access to your WordPress so I could take a look.