I want to develop a map in JQuery and HTML. It needs to show world country borders. It must be enabled mouse hover effect and also popup (when mouse over) in which I can add my own text.

What JS plugin do you suggest? I tried JVectorMap but it has only hover effect and I couldn't make popup window with own text.


8 Answers 8


Many people use OpenLayers as the map source, and doing a Google search for "OpenLayers jquery" provides three promising hits on the first page:

MapQuery, Combining the powers of OpenLayers and jQuery.

A plugin to combine JQuery and OpenLayers | Geodan Research

jquery-openlayers - jQuery UI plugin that wraps up OpenLayers API

  • I don't want to use OpenLayers. Is there some other way without using OpenLayers? Aug 14, 2012 at 18:49
  • 4
    Why not? OpenLayers is the most powerful and stable JavaScript-Lib I have ever seen. In my opinion there is absolutely no need to wrap it into another lib like jQuery. jQuery has been developed for a completely different use case. It is made for manipulating a large number of objects at once. But usually you will only have one single map-object.
    – Carsten
    Aug 14, 2012 at 19:16
  • Definitely, I would choose it immediately, but not my client, unfortunately. Thanks anyway. Aug 14, 2012 at 19:57

Depending on your acceptance of Google's licensing terms the Geomap is a good fit. It doesn't rely on OpenLayers (but I agree with @mwalker and @Carsten that OL is top notch), you can add your own text, it has a hover effect, and the aesthetic is quite nice.


In a similar vein to OpenLayers, another choice is http://leaflet.cloudmade.com/. Aside from its technical merits, it's very popular right now. It can be used easily with jquery, as an example at http://projects.bryanmcbride.com/leaflet/jqleaflet/ shows.

  • I've been playing with Leaflet lately and it really is nice. Maps with popups and legends are quick to create and get online. Not as robust as OpenLayers but the learning curve and API docs are great.
    – geomajor56
    Sep 11, 2012 at 14:18
  • 1
    I would agree that it isn't as complete in features as OpenLayers, but I have certainly had no issues with robustness of the library in any apps I have done.
    – Kelso
    Sep 12, 2012 at 7:02
  • Kelso, I agree. I like the separation of plugins from the core leaflet.js. I've been using geojson and jquery and haven't missed OpenLayers yet.
    – geomajor56
    Sep 13, 2012 at 13:07

If you find yourself taking another look at OpenLayers, you can have a look at this app I did using jquery, jquery ui, and yes OpenLayers. I chose to select with a click as opposed to a hover. The popups seem to flash a bit to much for me.It's easy to change in setting up, hover: true.

bct.capecodgis.com, It's simple but gets the job done. Just click on a marker. Hope it helps with your decision


Give imagemapster a try: http://www.outsharked.com/imagemapster/ this is the old html-imagemap "on steroids" or technically more correct. imagemapster is an extremly powerful jquery-plugin. your map is even scaleable


Here is another interactive SVG map I found myself: http://bit.ly/MJvhST It is purely HTML5 with customizable popups.


this is serious business http://help.arcgis.com/en/webapi/javascript/arcgis/index.html Maybe to much overhead.


OpenLayers is complex. (Google for 'OpenLayers complex' for some discussions of this point.)

While your requirements may justify the learning curve, I find leaflet better suited to my own modest needs.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.