How to add responsive & interactive world map on your website easily with Google GeoChart tool
A couple of months ago, my friend showed me a website featuring an interactive world map displaying the organization’s locations all over the world as well as their number of employees in each location. After a little of digging, I’ve found that it’s not hard to replicate such interactive world map on my site. At its core, the world map is powered by Google visualization tool, and all you need to do is do re-use their code and a little bit of tinkering to customize the map fit your purpose.
Note that this is not using the image map/hotspot — when you add a static image (of the map) and slice it into different region then add the mouseover code to create the effect.
Demo/Example of Interactive World Map
For demonstration, below is the interactive world map for a fictitious insurance company. The map highlights countries where the company has offices together with information about number of clients and number of agents it has in that country.
- Data points: I chose to display 3 data points (country name, client count and agent count), but you can display as many data points for as many countries as you want.
- Countries: Although I displayed 20 countries, you can display as many countries as you want to as long as you have data for the country (and use the correct country name), the country will be highlighted.
- Colors: I used different shades of purple for colors, but you can use your own colors. Google will use darker shade for countries with higher number and lighter shade for countries with lower number. The selection is somewhat automatic.
- Size: You can scale it as big as you want to fit your webpage. For the example, I made it responsive with the max height of 400px.
Pretty cool, isn’t it? Here’s the detailed explanation.