Google Maps API v3 Highlight Country Border without using Polygons

Question

I need to highlight the border of a country - let's say Switzerland. I achieved it with already with FusionTablesLayer like:

        var layer = new google.maps.FusionTablesLayer({
                    query: {
                        select: 'geometry',
                        from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk',
                        where: "ISO_2DIGIT IN ('CH')"
                    },
                    styles: [
                        {
                            polygonOptions: {
                                strokeColor: "#FF0000",
                                fillOpacity: "0"
                            }
                        }
                    ]
                });

                layer.setMap(map);

The problem hereby is, that the drawn border is too straight

Is there any possibility to use some kind of search request, because if I go to Google Maps and search for Switzerland the country borders are highlighted in a light pink. This would already fullfil my requirements. See Maps

Thanks in advance

Answer 1

As I said in my comment, this is not available through the API (at least at the time we speak).

You can do 2 things though:

1. check out this answer where I give a complete solution on how to overlay polygons as country boundaries and provide a complete world data set.

2. Subscribe to this feature request that is exactly what you are looking for.

Hope this helps!

Note: this answer is still valid in 05.2022

Edit

_{June 24. 2022}

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.

Here is a complete example. To reproduce, you need to create a new map ID and map style in your Google Maps Platform console and select the appropriate feature layer(s). All information is here.

let map;
let featureLayer;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 46.80, lng: 8.33 },
    zoom: 6,
    mapId: "2bda068b3c8ec0f0", // You need to create your own map ID
  });

  featureLayer = map.getFeatureLayer("COUNTRY");

  // Define the styling options
  const featureStyleOptions = {
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 1.0,
    fillOpacity: 0,
  };

  // Apply the style to a single boundary.
  featureLayer.style = (options) => {
    if (options.feature.placeId == "ChIJYW1Zb-9kjEcRFXvLDxG1Vlw") {
      // Above Place ID is Switzerland
      return featureStyleOptions;
    }
  };
}

#map {
  height: 180px;
}

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=beta" defer></script>