json - Assign different color to each country in the google map api

Question

Does anyone know how to assign a different color to each country in a google map? I have data which stored each country with same colored data. e.g:

in the world map

Blue overlay to India, then RED Afganishtan...etc If its need to be color by using polygon then let me know any example with knowing border of each country lat long. Thanks

Answer 1

You can easily do that by loading an appropriate GeoJSON onto your map (you can find more information here). For example, at the below, I created a medium resolution GeoJSON of the world via here and uploaded it to my server, and then by the following script, I was able to config the Google Map API to show countries in different colors.

                // Load GeoJSON.
            map.data.loadGeoJson('http://domain/geojson.json');

            map.data.setStyle(function(feature) {
                var color = 'green';
                if (feature.getProperty('wb_a2') === "AU") {
                    color = 'red';
                }
                if (feature.getProperty('wb_a2') === "IR") {
                    color = 'yellow';
                }
                return /** @type {google.maps.Data.StyleOptions} */({
                    fillColor: color,
                    strokeColor: color,
                    strokeWeight: 2
                });
            });

As you can see the default color is Green and both of Iran and Australia have got different colors.

Notice: from here you can create different GeoJSON files according to your requirements such as the file size, covering the area and the resolution.