Display a map and highlight certain countries

Question

Here\'s what I\'m struggling to do : Display a map on page (Google map or any of it competitors, free is possible...) and highlight certain countries on this map (the list of th

Answer 1

If you need just a boundaries of the countries with different colors you can try jVectorMap.

Answer 2

You can create very complex polygons in Maps without a drop in performance if you store them in KML file format and load them as KmlLayers. KML is an XML based vector file format for geo data. The beauty of using KML files in Google Maps is that they are rendered on Google servers into simple PNG files, matching the current resolution and bounding box of your Maps view at any time, no matter how complex the original polygon data is. So all complexity is handled server side at Google.

Here is a sample of a project, where I have used a KML mask for one of the federal states of Germany.

For a quick review KML files can also be loaded directly into the Google Maps public website (by entering their URL into the search field). Here is the KML file that I have used in the above project, loaded directly into Google Maps. (I have actually used a KMZ file here, but that is simply a KML file packed into a ZIP archive. You can pack and unpack it with normal ZIP tools.) [UPDATE: This does not work anymore in the new Maps version (started in 2014).]

Please be aware that Google implies a size limit to KML/KMZ files (currently 10 Mb uncompressed, 3 Mb compressed - details see here). If your KML files should be to large, there is software available to reduce the complexity (see examples here and here).

Please notice that KML files are only a solution if your polygons are static (like the borders of countries or cities) and not generated on the fly (e.g. depending on any user input). For dynamic polygons you will still have to use the Polygon class of the Maps API with the complexity restrictions that you have mentioned. (But you are still free to use KML layers and switch them on and off depending on user input, as long as the polygon details don't have to change.)

Answer 3

I believe you will need a polygon to do that.

http://code.google.com/apis/maps/documentation/overlays.html#Polygons_Overview
http://code.google.com/apis/maps/documentation/reference.html#GPolygon

like this sample: http://gmaps-samples-v3.googlecode.com/svn/trunk/poly/pentagon.html

Or check this site that can do all the hard work for you :)
http://www.dyngeometry.com/web/WorldRegion.aspx

Finally, there is also Google Geochart
Check it here: https://developers.google.com/chart/interactive/docs/gallery/geochart