Responsive Vector Maps

Responsive Vector Maps (RVM) is a free map plugin for WordPress. Extremely easy too install and configure, RVM is a cool alternative to standard maps: beautiful and clean maps for modern websites, particularly suitable for travel bloggers and travel sites!

Download latest RVM version for free from WordPress Plugin Repository

What does it do ?

RVM ( Responsive Vector Maps ) allows you to create customizable and clickable responsive vector maps for your WordPress sites. The plugin is completely free and comes by default with 2 maps: Italy Map and World Map.

If you’re looking for other maps to use within your site, probably we have: more then 200 cool maps ready to be installed and customized into RVM in just one step without any coding skills!

Our interactive and linkable map of Rome divided into quarters, suburbs and boroughs


Have a look at map of Rome

Have a look at what you can achieve with RVM!

Features

  • Linkable Subdivisions: Customize background colours, links and html popup ( tooltip )
  • Toggle (show/hide) elements on the page or display label content over the map when clicking on subdivisions
  • Linkable Markers: Add your linkable markers on most of the maps using latitude and longitude
  • Chance to have html popup, dimension ( marker radius ) and min/max radius dimension scale
  • Custom Icon for Pinpoints: Use your favourite images as icons for markers’ pinpoints ( paid module available only for maps specifically support it )
  • Customizable look and feel ( even transparent background )
  • Mouseover tooltip effect
  • Zoom capabilities
  • Shortcodes: Use generated shortcodes in your posts, pages or sidebars
  • Widget: Maps can be used in widget area too
  • Preview functionality: WYSAWYG while creating/editing your map
  • Export and Import features: export and import markers and subdivision settings in just 2 clicks
  • Responsive: Maps will adapt their width to any device
  • High quality image
  • Cross-browser compatibility
  • +200 downloadable maps available
  • Chance to install dynamic maps with all kind of svg ( not only geographical maps ! )

Have a look at RVM settings within your WordPress Dashboars!

North America and USA

Have a look at our +200 cool maps ready to be installed and customized into RVM in just one step without any coding skills!
Country, city, continent and world maps. Adapt any map to your website look-and-feel.
Link any region of the maps to your posts, pages or any other external link.
Add markers using latitude and longitude on most of the maps.

Have a look at our complete inventory of downloadable maps

More then 5000 websites already use RVM!
Want you to be the next? Download it for FREE now !

Latest maps added

Some maps of our inventory…

Have a look at our complete inventory of downloadable maps

 

The more you buy the more you save!

With a minimum purchase of 55 € you’ll get a discount of 20% at checkout. Please use following coupon code:
RVM-PACK-20

With a minimum purchase of 80 € you’ll get a discount of 30% at checkout. Please use following coupon code:
RVM-PACK-30

With a minimum purchase of 100 € you’ll get a discount of 40% at checkout. Please use following coupon code:
RVM-PACK-40

Installation

  1. Download the zip file from Wordpress repository
  2. Login to your WordPress dashboard
  3. Go to Plugins > Add New, under Install Plugins title click on Upload and use the browse button to search the .zip file you have downloaded at point 1
  4. Once activated you have a RVM tab on the left hand side
  5. Start creating your favourite maps

Still thinking better using Google Maps ?

Even if you do not want to consider the advantage to use a local javascript resource without disturbing Google servers , you cannot achieve following with any other plugin !

Potentially everything can be turned into an svg can become a linkable map for RVM

SX-70 camera is not provided together with the code 🙂

Get the Polaroid SX-70 svg map for free and credit me all around the globe !

Thanks mr. Land.

If you are looking for other maps just have a look at download page !

What does it mean  “responsive” ?

Basically RVM map will always adapt automatically to any kind of device: mobile, tablet, desktop, wide screen tv etc…

If you are an history fan or just you want to know more about responsiveness, please check this article on List Apart.

Ok, but why vector ?

Vector maps have the advantage to not loose quality when reducing or increasing their sizes. Then maps created with this plugin are capable to  maintain their aspect ratio adapting perfectly to their container.

Using RVM you will not need to create static images for area map tags. Based on great work of Kirill Lebedev jvectormap, this plugin uses a combination of css, html and javascript to create as many svg maps as you like for your site.

You can use maps in sidebars as widgets or just in the post content using shortcodes.

Download Maps

Have a look at our complete inventory of downloadable maps

Frequently Asked Questions

Can I customize map and canvas colours ?

Yes, these are possible layout customisations:

  1. Canvas colour
  2. Map colour
  3. Map border colour
  4. Add zoom-in/zoom-out buttons
  5. Map width ( can use em, %, px etc.. )

Can I customize map region links ?

Yes, it’s possible to customize links for each region/area displayed in the map. When creating a new map or editing an existing one, you will have chance to assign url to each area/region of the map. Default areas/regions have just a tooltip mouseover effect displaying area/region name. It’s possible to add html or plain text into regions/areas tooltip in complete security.

Which WP version is the plugin compatible with ?

The plugin will work at its best from WP ver 3.6 onwards.

I created a new map, but I would like to give specific width just for a specific post, is it possible ?

Yes, you can create a new map which will adapt to your box container automatically and will be responsive, but you can even use an additional width parameter to the shortcode within a specific post. Your map will have specific width just for that post.

Notice

ATTENTION: bare in mind that using same identical shortcode ( same post ID ) in more then one position on the same page will result into a layout issue: in other words if you create a new map you should not use it in more then one position ( post/sidebar ) per page. That’s because the javascript managing map creation fires same ID selector.

Have a look here to see how it works!

Create instead a new one and use it for your purposes.

 
Share RVM
  • 58
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    58
    Shares

84 thoughts on “Responsive Vector Maps”

    1. Grazie Angelo per il tuo suggerimento. E’ qualcosa a cui lavorero’ senz’ altro. Per ora la priorita’ sono la possibilita’ di aggiungere markers e ulteriori mappe.
      A presto

      Reply

  3. According to your world map version, France is located in both South America also. If not for this mistake, I would love to use this plugin, but accuracy is a huge deal to me!

    Reply

    1. Hi Sommer,

      thanks for your notification! It sounded weird to me too and is funny to know new things everyday.
      I was quite surprised seeing France in South America too… but, devil is in details, so I’ve checked and… that state between Brazil and Suriname is really a region of France …wow!

      Check here for more info: http://en.wikipedia.org/wiki/French_Guiana

      Maybe is not 100% correct not giving its specific name and maybe is a limit of jvectormap. I’m just using jvectormaps jquery plugin which is based on public work of Naturalearthdata ( http://www.naturalearthdata.com ).

      Anyway, there is room for improvements !

      Thansk again

      Reply

  4. Thanks so much for your plugin! It does just what I was looking for, and almost works perfectly, but for some reason I can’t change the colour of Indonesia? All the other countries that I have tried work fine, but Indonesia stubbornly stays default colour. Can you see any reason for that?

    Reply

    1. Hi Rebecca,

      thanks for spotting it.

      This is a bug and it comes basically because of specific code of Indonesia ( ID ) which conflicts with WordPress use of ID.

      I’ll fix it and I’ll release a new version today/tomorrow.

      Thanks again for appreciating my work.

      Reply

    2. Hello! I am encountering this issue with Indonesia. Hope you support can help resolve this – I just purchased the Asia map.

      Reply

  7. Hi there,

    I sent an e-mail… we have found a bug with the country of Niger on the map. I wonder if it is like the error Rebecca posted here? Can you look into this?

    Thank you for your amazing plugin!

    Reply

  10. Hello,

    we try to use your Map Plugin on one WP Website but we don´t can see any map. The preview is white. We add 3 Maps. All the same problem.

    What can we do for get it working?

    Second questions. Has the plugin the possibility to add links zu special areas? That would be nice, because that client want link different areas to different websites.

    If not, maybe its a good feature for the next version.

    Cheers tuWWW

    Reply

    1. Hi,
      if you could provide a link I would be more then happy to help !
      When you say preview you mean the blue preview button at the bottom ? Or the view page on top of the post ?
      The second one will give you a blank page because RVM needs shortcodes or to be inserted into a widget area in order to work.

      If the blue preview button does not work can be a javascript issue: can you check console and sens me some info regarding browser, SO used ?

      Then when you ask “Second questions. Has the plugin the possibility to add links zu special areas?” what do you mean exactly ?

      Region are clickable and you have the chance to create markers using lat and long.

      Thanks for contacting me and for using RVM

      Reply

  11. The Map don’t show up in Chrome or Safari and in a widget. When resizing the Window, the map shows up. After refresh the map is gone. Only works when resizing the Window. Can you confirm this? Newst RVM Version and newst Safari & Chrome – on Windows.

    Mobile Safari, FireFox and IE works fine.

    Reply

    1. Hi Masi,

      Can you provide me with a link to check please ?
      Are you getting any errors in console ?

      Thanks

      Reply

  12. Great plugin! We use jVectorMap on sites other than WordPress. We have several custom maps that read json files. Is it possible to read json files with this plugin?

    Reply

    1. Hi Mike, thanks for contacting me.
      No, this plugin is not designed to read jSon file, I’m sorry.
      If you need some custom map I can work on it if you like.

      Cheers

      Reply

  14. When I choose the US map and add markers to it, they don’t show up in the published version. Changing regions to a different color works fine though. I’ve double checked my latitude and longitude and made multiple markers, but none of them show up. I am using 34.354401, 89.496902 with all other options the default settings.

    Reply

  15. Ciao, come faccio ad editar il css di tutto il div…Ho visto che la classe e’ map-container rvm-map-container ma non lo trovo nel css del plugin.

    Reply

    1. Ciao Vlad,

      non credo di aver capito bene la tua domanda, comunque puoi usare quelle classi e l’id selector di ogni singola mappa generata nel tuo style.css invece che nel css del plugin.

      Eviti così di sovrascriverlo negli aggiornamenti futuri.
      Fammi sapere se ti sono stato utile,
      nel frattempo auguri e buone feste!

      Reply

  16. Hello sir,
    i already have a .svg map but i don’t know HOW to install it or make it compatible with the plugin ?

    Reply

  17. ciao, avrei due domande
    1) si puo creare una mappa con due nazioni e basta ? esempio francia e spagna nella sessa mappa ? se si come vengono gestite poi per quanto rigurda le regioni ?

    2) ho notato che le varie regioni esempoio dell’italia non hanno un identificativo ID , non è possibile creare quindi funzioni con css o javascript per una singola regione come un click e possibile che ogni regione abbia un ID, se si come ?

    Reply

    1. Ciao,
      1) Se ti occorre una mappa personalizzata ti contatto via email
      2) Interagire con i path svg non e’ semplice. Comunque e’ possibile che includa un id per ogni area nelle prox versioni.

      Grazie per avermi contattato

      Reply

  18. Ciao,

    bellissimo plugin complimenti!
    Devo solo far presente che c’è un bug su Google Chrome e Safari.
    La mappa non viene visualizzata correttamente ma molto piccola in un angolo.
    E’ possibile risolvere il bug?
    Grazie
    S.

    Reply

    1. Grazie Sara,

      hai installato l’ultima versione del plugin? Su tutte le mappe hai questo problema?
      Io non riesco a riprodurlo. Avviene poi con un tema in particolare ?
      Se hai un link da mostrarmi magari riesco a capire il possibile bug.

      Fammi sapere e grazie ancora!

      Reply

    1. Ok Sara,

      sai dirmi se il tema “onetone pro” usa ajax per caricare il contenuto delle pagine ? Mi sembra un problema di questo genere anche se pensavo di averlo risolto con l’ultimo aggiornamento.
      Puoi provare a cambiare un valore e farmi sapere se funziona ? Altrimenti, se puoi e seil mio suggerimento non funziona, mandami cortesemente lo .zip del tema, così posso controllare in locale.

      Allora cerca questo valore:

      5000 ( significa un ritardo nel caricamento della mappa di 5 sec ) in rvm_shortcode.php

      e dagli un valore elevato, per esempio 20000. Se funziona diminuisci progressivamente e ti attesti all’ultimo valore in cui funziona.

      Fammi sapere

      Reply

  20. Grazie nuovamente della risposta,

    si usa Ajax, ho modificato il valore. Ora il problema si presenta meno volte ma si presenta comunque. Ho notato che il bug si risolve non appena ridimensiono la finestra del browser.
    C’è una mail a cui posso scrivere per condividere lo screenshot e lo zip eventualmente?

    Grazie mille!!
    Sara

    Reply

  21. I am looking for a way to only display a region of a country instead of the country itself. Is this possible?
    Thanks for the great plugin!

    Reply

    1. Hi Tobias,

      you should remove the unwanted paths from the javascript holding all the map’s paths.
      Let me know.

      All the best,
      Enrico

      Reply

      1. Hi Enrico,

        Thank you very much, it worked!

        Is there a way to make this one region appear bigger? Right now it is the same size like before with all the other regions.

        Would be great if I could make it appear bigger but I did not find the source to change this.

        Thanks and all the best for you too,
        Tobias

        Reply

  22. A superb plugin, does exactly what my client wanted. ie. to show links to various state approvals.

    Thank you.

    Reply

    1. Hi Kyriakos,

      thanks for using RVM. Please visit this page and search for Translate subdivisions’ names on subdivisions settings tab. Let me know if it solves.

      Have a nice day

      Reply

  24. Terrific plugin. Thanks so much. I had a need to highlight a number of countries from the UK in the North, UAE in East, South Africa in South and Mexico to West (see http://cayley.co.uk). I wondered if it was technically possible to be able to select a rectangle so that only the area within the rectangle is displayed. I think google have a tool for creating a rectangle (see example at: http://www.birdtheme.org/useful/v3largemap.html) and appreciate this is different to vector maps but it would be terrific if the same idea could be used to select an area to display. Thanks again for your awesome work.

    Reply

    1. Hi Nick, unfortunately there is not this option available on RVM.
      And thanks for your inputs and your ideas .

      Have a nice day,
      Enrico

      Reply

  25. Sorry – another thought that maybe would achieve a similar result within the existing code:
    1) Option to set the starting zoom level by % (so a bit more precise than the Plus/Minus buttons
    2) Option to set the Long/Lat of the top left corner

    Cheers, Nick

    Reply

  26. Hi Enrico

    I’ve implemented your tips and tricks ‘How get rid of subdivisions’ name on mouse hover’ but it doesn’t appear to make any difference in V5. Here is a copy of the code within responsive-vector-maps/includes/rvm_shortcode.php:

    // Region label popup
    if ( isset( $output_is_regions_popup ) && $output_is_regions_popup ) {
    $output .= ‘, onRegionTipShow : function(event, label, code){‘;
    $output .= ‘if(!region_popup.hasOwnProperty(code)) {‘;
    // no text found, return standard state name
    $output .= ‘return true ;’;
    $output .= ‘}’;
    // else construct label for state with extra text
    $output .= ‘label.html(label.html() + “” + region_popup[code]); ‘;
    $output .= ‘ }’;
    } //isset($output_is_regions_popup) && $output_is_regions_popup
    else {
    $output .= ‘, onRegionTipShow : function(event, label, code){‘;
    $output .= ‘event.preventDefault();’;
    $output .= ‘ }’;
    }

    Could you let me know what I’ve done wrong please? What I want is to NOT show country names in any popups but I do want to show label popups IF text is entered into the Subdivisions tab of Settings

    Thanks

    Nick

    Reply

    1. Hi Nick, sorry for long waiting!
      I just understood correctly what you were looking for and my advice on Tips&Tricks does not cover your request cause it will COMPLETELY get rid of default names of subdivisions.

      If you want to display subdivisions’ names ONLY when you fill the label popup field in “subdivisions” tab, what you can do is :
      – go to the javascript file managing the map generation (for example, in the default Belgium map you can find the data into js–>regions-data–>jquery-jvectormap-be_merc_en.js)
      – get rid of all names of any single path : search for example Namur, you should find “name”: “Namur” change into “name”: “”
      – once you’ve finished for all the other names, you’ll see names shown only when popup label field is filled out.

      Downside is you’ll have a little circle displaying on mouse over on empty subdivisions’ popup. Maybe playing with css…
      All the best!

      Reply

  28. >>> New feature : Internationalization ready.
    >>> Plugin can now be translated
    Hi Enrico,
    how to do so? Will it work with cyrillic symbols?

    Reply

      1. Hi Enrico,
        I’ve made a translation to Russian. There’s only one line I doubt, “Parent maps colon” . What is “colon” here?
        Also, it would be just great if I could translate all the subdivisions to Russian. I tried to do so as described on this site, but it seems that your plugin doesn’t support cyrillic symbols (я, ф, ы etc) and I get question marks instead of letters. Maybe I had been doing something wrong? Is there any chance to make it work?

        Reply

        1. First of all thanks Anton!
          Parent maps colon is a typo basically.
          This should be : “Parent maps :” … it’s the copy for “parent_item_colon” item for Custom maps that I guess is used anywhere 🙂
          So you could translate thinking as it would be : “Parent maps :”

          https://codex.wordpress.org/Function_Reference/register_taxonomy
          ‘parent_item_colon’ – The same as parent_item, but with colon : in the end null, __( ‘Parent Category:’ )

          Regarding the translations of the subdivisions: I guess you’re modifying the javascript file. So please trying encoding those symbols and let me know.
          Thanks again!

          Reply

  30. Do you have a world map where France and French Guiana are not connected. For my use of the map it is problematic that French Guiana is coloured alongside France.
    Cheers,
    Zofka

    Reply

      1. But why make it as such? If one should follow those rules then Greenland should be coloured when Denmark is chosen. And if Kosovo which is not recognised internationally as a state separate fro Serbia can be coloured, then I can’t see the reason for not separating France and French Guiana. It seems very random. Is there any chance you will be considering separating the two in the future?

        Reply

  31. Buongiorno,
    Esiste un modo per fare sì che al click le pagine dei vari paesi si aprano all’interno della stessa pagina (con un link del tipo target=”_self”) invece che su nuove pagine come accade di default?
    Grazie in anticipo!

    Reply

    1. Buongiorno Sabrina,

      nei main settings trovi il drop down per la destinazione dell’apertura dei link!
      Fammi sapere se hai problemi,
      grazie per avermi contattato

      Reply

  32. Dear Enrico,

    thank you very much for this brilliant plugin. It meets all our needs even as heavy user, stable and reliable. Great job!

    Regards
    Rainer, The Wall Net

    Reply

    1. Thank you so much Rainer!
      I really would appreciate if you could be so nice to rate my plugin on platform too 🙂

      Reply

    1. Hi Denis,
      thanks so much, really appreciate!
      In order to change names displayed on the maps, in your case you can change it locally amending the world-regions.php file.
      Please have a look at this page and check for “Translate subdivisions’ names on front end ( visible map on your site )”. Unfortunately it cannot be done on Glotpress. If you like and have time you can translate RVM settings and intrenal pages by the way ! I would really appreciate you could translate it into France 🙂

      Reply

  34. Ciao Enrico,
    abbiamo usato il tuo plugin su un sito https://www.agojet.com/rivenditori.
    Abbiamo solo un problema, perchè al click sulle regioni, la regione precedente non si chiude se se attiviamo la X per la chiusura del popup la regione rimane selezionata, è una cosa risolvibile?
    Grazie mille.

    Reply

    1. Ciao Mirko,

      con l’ultima versione 5.7.2 ho risolto i problemi di toggling dell’azione Show custom selector. Per ottenere quello che mi scrivi devi utilizzare quell’azione 🙂
      Buona giornata

      Reply

  35. Ciao Enrico,

    grazie mille for your great and prompt support. and last but not least: grazie mille for this awesome plugin, which meets all our needs – even as heavy user with 500+ markers on two maps. We love it!

    Best –
    Rainer

    Reply

    1. Hi Rainer,
      thank you so much for your kind words, really appreciate and thanks for appreciating my work here.
      All the best and good luck with your project,
      Enrico

      Reply

  36. Complimenti vivissimi , il plugin è una bomba.
    Puoi dirmi come poterlo allineare al centro della pagina lo shortcode generato ?, non riesco in nessun modo, sicuramente per la mia inesperienza, grazie

    Reply

    1. Buonasera Francesco, grazie per avermi contattato e per apprezzare RVM!
      Dunque per centrare una mappa in una pagina ( ipotizzando dunque che la mappa non ne prenda tutta la larghezza ed abbia una dimesione fissa o percentuale ), puoi creare un box contenitore con lo shortcode della mappa all’interno ed assegnare al box un allineamento centrato.
      Per farti un esempio pratico, puoi copiare ed incollare nell’editor di testo in modalità “Text” quanto segue:

      <div style="margin: 0 auto;">[rvm_map mapid="29"]</div>

      sotituendo ovviamente 29 con il tuo codice shortcode!
      Se vuoi poi controllare anche la grandezza della mappa puoi assegnare un width fisso o percentuale diventando:

      <div style="margin: 0 auto;width:50%;">[rvm_map mapid="29"]</div>

      Fammi sapere se risolvi ed in bocca al lupo 😉
      Se poi vuoi aiutarmi, puoi votare RVM e fare una recensione qui
      Grazie in anticipo!

      Reply

  38. Ciao e complimenti per il tuo ottimo plugin.
    Avrei bisogno di tradurre i nome delle regioni italiane in tedesco e francese nel mio sito multilingue.
    Ho installato wpml ma non ho trovato ancora una soluzione.

    Come posso farlo?
    Grazie mille

    Reply

    1. Ciao Alessandro,
      grazie per avermi contattato e per apprezzare RVM!
      E’ possibilie fare quello che tu mi chiedi ho bisogno solo di un pò di tempo così la metto nella sezione tips ed aiutare anche altri possibili utenti.
      Ti faccio sapere non appena creo la sezione dedicata.

      Grazie ancora e a presto.

      Reply

  39. Hi there!

    First of all, I LOVE this plugin. Thank you very much!

    But unfortunately I broke it After I optimized my website. (I think because now I load CSS async). The map wont display correctly anymore.

    Firefox does display the map but TINY (15px wide vs regular dull with like before async CSS?) but after opening Dev tools, which I did to locate the problem, the maps jumps to full size again. Then I close devtools and the map is TINY again)

    In Chrome it Displays Tiny, regular or a bit shifted lower like there is a sudden padding.

    Do you have any idea how I can correct that? The rest of the website works fine and I would really like to keep the MAP 🙂

    Thank you so much in advance!

    Best Wishes,
    Jessica

    Reply

    1. Hi Jessica,

      sorry for delay and thanks for your message and your kind words.
      Could you please send me a link where I can check this behavior ?
      If you prefer please use the contact form in my contacts page or drop me an email at info@responsivemapsplugin.com directly.
      Thanks

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Stop using area tag!