Highlight whole countries in Google Maps

Question

I have a general question about Google Maps. I want to use Google Maps just for germany, but of course the neighbor countries are shown as well. The border of germany is rarely visible.

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

Someone had a similar question (http://stackoverflow.com/questions/2956355/highlight-polygon-and-tint-rest-of-map-using-google-maps/2958856#2958856) a while back. If you have the coordinates for the border, you can invert a polygon using the method in my answer to that question. If you don't have the coordinates for the border, you can probably find them somewhere on the web, or draw the border yourself using google maps "My Places" and get the coordinates out. — Mark, Dec 29 '11 at 17:21
Does this answer your question? [Google Maps API v3 Highlight Country Border without using Polygons](https://stackoverflow.com/questions/28964573/google-maps-api-v3-highlight-country-border-without-using-polygons) — MrUpsidown, Jun 24 '22 at 12:51

score 51 · Accepted Answer · answered Jul 24 '13 at 16:10

51

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

answered Jul 24 '13 at 16:10

davetapley

17,000
12
60
86

2

Even if you change the color, this is pretty ugly. Especially as the layer goes over the country names. – Jeroen K Sep 19 '13 at 08:06
2

You make a valid point, I've created an [issue here](https://code.google.com/p/fusion-tables/issues/detail?id=1308). – davetapley Sep 19 '13 at 23:28
Is it possible to choose the highlight colour? – Haya Raed May 17 '14 at 05:10
@HayaRaed yes, see [Fusion Table Styles in the docs](https://developers.google.com/maps/documentation/javascript/layers#fusion_table_styles). – davetapley May 17 '14 at 18:32
7

FYI: **Fusion Tables are now deprecated** and will be removed next month. – Martin Zvarík Feb 09 '19 at 18:09
is there a way to achieve this now since fusion tables are deprecated? – Cristian Jan 07 '20 at 13:50

score 9 · Answer 2 · answered Nov 23 '18 at 10:47

9

For any one who ends up here in the future, this seems to now be handled very well by Google Charts, the latest implementation of the deprecated link above

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

answered Nov 23 '18 at 10:47

mgibson

6,103
4
34
49

is there a way to costumize the map and apply zooming and paning? – Cristian Jan 07 '20 at 14:03

score 3 · Answer 3 · answered Feb 21 '14 at 06:32

Old question, but: Google's deprecated Map Charts API looks like a better solution, if you do not need the map to be draggable:

https://developers.google.com/chart/image/docs/gallery/new_map_charts

enter image description here

This api will continue to work at lest until April 2015: https://developers.google.com/chart/terms

Important: The Image Charts portion of Google Chart Tools has been officially deprecated as of April 20, 2012. It will continue to work as per our deprecation policy.

score 1 · Answer 4 · answered Jun 24 '22 at 10:29

14 years (!) after the original feature request, Google has enabled Data-driven styling.

One of the most commonly requested features you have asked for is access to the same boundaries and polygons used in Google Maps to build informative and engaging maps for your customers. Today, we are excited to announce the preview release of Data-driven styling for the Maps JavaScript API, which enables you to display and style Google boundaries.

Here is a demo and the official documentation.

score 0 · Answer 5 · edited Aug 31 '17 at 09:12

0

If you just want a map of Germany why not use this:

http://jvectormap.com/maps/countries/germany/

Germany is already available

edited Aug 31 '17 at 09:12

martin jakubik

4,168
5
29
42

answered Dec 30 '11 at 19:22

defau1t

10,593
2
35
47

I need all the details which are containing in Google Maps. – Armin Dec 30 '11 at 19:50
can you please elaborate what is your exact requirement. No doubt google maps is always the answer, I am just wondering if your problem can be solved with other map type solution – defau1t Dec 30 '11 at 20:18
Okay, I have coded a vector based map solution for a customer, which calculates the position of dots by long and lat and creates clusters (http://goo.gl/LvfFN - the map on the left side) . The customer wants additionally a gmaps implentation. Do you want to ask him why? I suppose this is not part of my initial question! – Armin Dec 30 '11 at 20:48
1

Then from the google maps prespective, the best approach for you is to use google chart tools http://code.google.com/apis/chart/interactive/docs/gallery/geomap.html, if you wanyt to leverage google maps then you need to overlays and highlight the germany map, like what is here for usa map http://econym.org.uk/gmap/example_egroundoverlay.htm – defau1t Dec 30 '11 at 21:24
Sad, that there seems to be no fancier solution :( But thanks for your efforts! – Armin Dec 30 '11 at 21:30
right, there is no fancier solution than this. you might still explore raphael js or the plugin I mentioned. – defau1t Dec 30 '11 at 21:32
1

@defau1t thanks for fixing it - yesterday jvectormap.owl-hollow.net did not exist at all. – Olli Apr 08 '14 at 07:28
@Olli: that's true, the link was down but not 404. I saw someone down voted the post today so I was curious what could be the reason? – defau1t Apr 08 '14 at 10:02
@defau1t can you fix the link in the post? ...owl-hollow... does not respond. – martin jakubik Aug 29 '17 at 16:26
@martinjakubik: Here you go http://jvectormap.com/maps/countries/germany/ if you find any post as useful make sure you vote up the answer :) – defau1t Aug 30 '17 at 18:51
@defau1t I meant why don't you Edit your post and fix it... but I did it myself. Otherwise your post is wrong and people have to read down the comments to find the right link. – martin jakubik Aug 31 '17 at 09:13

score 0 · Answer 6 · answered Jan 23 '12 at 10:19

0

Currently (API version 3) there seems to exist no possibility to increase border-thickness for single countries.

answered Jan 23 '12 at 10:19

Armin

15,582
10
47
64

Highlight whole countries in Google Maps

6 Answers6

Linked