Clickable countries using Google Maps API
Something like this would be ok? Copy and paste inside a HTML page body (JSFiddler here).
<style type="text/css">
#map-canvas {
height: 600px;
width: 800px;
}
</style>
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
// the map
var map;
function initialize() {
var myOptions = {
zoom: 2,
center: new google.maps.LatLng(10, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// initialize the map
map = new google.maps.Map(document.getElementById('map-canvas'),
myOptions);
// these are the map styles
var styles = [
{
stylers: [
{ hue: "#00ffe6" },
{ saturation: -20 }
]
},
{
featureType: "landscape",
stylers: [
{ hue: "#ffff66" },
{ saturation: 100 }
]
},{
featureType: "road",
stylers: [
{ visibility: "off" }
]
},{
featureType: "administrative.land_parcel",
stylers: [
{ visibility: "off" }
]
},{
featureType: "administrative.locality",
stylers: [
{ visibility: "off" }
]
},{
featureType: "administrative.neighborhood",
stylers: [
{ visibility: "off" }
]
},{
featureType: "administrative.province",
stylers: [
{ visibility: "off" }
]
},{
featureType: "landscape.man_made",
stylers: [
{ visibility: "off" }
]
},{
featureType: "landscape.natural",
stylers: [
{ visibility: "off" }
]
},{
featureType: "poi",
stylers: [
{ visibility: "off" }
]
},{
featureType: "transit",
stylers: [
{ visibility: "off" }
]
}
];
map.setOptions({styles: styles});
// Initialize JSONP request
var script = document.createElement('script');
var url = ['https://www.googleapis.com/fusiontables/v1/query?'];
url.push('sql=');
var query = 'SELECT name, kml_4326 FROM ' +
'1foc3xO9DyfSIF6ofvN0kp2bxSfSeKog5FbdWdQ';
var encodedQuery = encodeURIComponent(query);
url.push(encodedQuery);
url.push('&callback=drawMap');
url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ');
script.src = url.join('');
var body = document.getElementsByTagName('body')[0];
body.appendChild(script);
}
function drawMap(data) {
var rows = data['rows'];
for (var i in rows) {
if (rows[i][0] != 'Antarctica') {
var newCoordinates = [];
var geometries = rows[i][1]['geometries'];
if (geometries) {
for (var j in geometries) {
newCoordinates.push(constructNewCoordinates(geometries[j]));
}
} else {
newCoordinates = constructNewCoordinates(rows[i][1]['geometry']);
}
var country = new google.maps.Polygon({
paths: newCoordinates,
strokeColor: '#ff9900',
strokeOpacity: 1,
strokeWeight: 0.3,
fillColor: '#ffff66',
fillOpacity: 0,
name: rows[i][0]
});
google.maps.event.addListener(country, 'mouseover', function() {
this.setOptions({fillOpacity: 0.4});
});
google.maps.event.addListener(country, 'mouseout', function() {
this.setOptions({fillOpacity: 0});
});
google.maps.event.addListener(country, 'click', function() {
alert(this.name);
});
country.setMap(map);
}
}
}
function constructNewCoordinates(polygon) {
var newCoordinates = [];
var coordinates = polygon['coordinates'][0];
for (var i in coordinates) {
newCoordinates.push(
new google.maps.LatLng(coordinates[i][1], coordinates[i][0]));
}
return newCoordinates;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas"></div>
This is a modified version of this Fusion Tables Layer Example: Mouseover Map Styles.
You should also take a look to Styled Maps.
Another thing you may be interested in is Natural Earth Data. This in the case you need a polygon data source. And here an example of using it GViz API Example: Fusion Tables Data Source.
As the fusion tables are deprecated there is no inbuilt google solution to do this.
Here is small sample code that i made:
https://github.com/arturssmirnovs/Clickable-countries-using-Google-Maps-API
and working sample here: https://arturssmirnovs.github.io/Clickable-countries-using-Google-Maps-API/json/