Highlight whole countries in Google Maps

I was able to do this using the public World Country Boundaries.kml Fusion Table.

You’ll need to add it as a Fusion Table Layer to your map.


Firstly initialize a map zoomed out right out, centered so we can see most countries:

var map = new google.maps.Map(document.getElementById('map-canvas'), {
  center: new google.maps.LatLng(30,0),
  zoom: 2,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

Next add the FusionTablesLayer:

var world_geometry = new google.maps.FusionTablesLayer({
  query: {
    select: 'geometry',
    from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk'
  },
  map: map,
  suppressInfoWindows: true
});

That looks like this:

all countries


With regard to:

Is there a possibility to fade out the other, not used countries?

If you look at the Fusion Table you’ll see there are columns for Name and ISO_2DIGIT. We can filter on these by passing a where condition to the FusionTablesLayer, e.g:

  query: {
    select: 'geometry',
    from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk',
    where: "ISO_2DIGIT IN ('US', 'GB', 'DE')"
  },

To give:

filter countries with where

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)