Does anyone know how to give a different color to each country in a google map?

e.g:

in the world map

Blue overlay to UK, then RED china...etc

I wonder if google provide API to give color to each country

Thanks

Does anyone know how to give a different color to each country in a google map?

e.g:

in the world map

Blue overlay to UK, then RED china...etc

I wonder if google provide API to give color to each country

Thanks

• javascript
• google-maps

• Maybe this link will be useful. – krzysztof Commented May 6, 2019 at 20:56

4 Answers 4

Using Google Maps this is really not easy, as @oezi said you would need to build overlays of every country you want to color, which frankly sounds like a mess.

But if you don't need all of the functionalities of Google Maps, perhaps you can use a Map Chart from the fantastic Google Chart Tools (aka Chart API). You can check and tinker with a working example of a Colored Map (among some others) in the interactive Chart Wizard

2017 UPDATE: This answer is quite old and as such the Map Charts API has been deprecated by Google. You can use the Geocharts from the Google Charts API instead:

https://developers.google.com/chart/interactive/docs/gallery/geochart

Hope this helps!

you may check this question,it's the same question you are asking. How to color countries using google maps?

it's talking about google Geocharts in google maps.

there is a possibility to change the map style. and there is a very nice interactive example here - but, as far as i can see, it isn't possible to change the style of a specific country using this, so you'll have to build your own overlays using polygons.

First, find the shape file in .kml format. Tip: try googling "kml uk" or "kml china".

Once you have the KMLfile, host it somewhere and then call it as a var inside your Google Maps API initMap like this:

var myCustomRegion = new google.maps.KmlLayer({
    url: 'FULL_URL_TO_YOUR_SHAPE_FILE',
    map: map
});

Now your shape is laid into your map.

You can style the shape using the <LineStyle> and <PolyStyle> tags inside the KML file itself.