CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
JBel
JBel

Reputation: 349

Using Google Maps, how to fill all the countries area with a certain color?

In my Google map, all I want to show is

  1. a background color for the entire map
  2. counties boundaries in a color of my choice
  3. countries area filled with a color of my choice
  4. Labels for country names
  5. Labels for province names
  6. Labels for locality (city) names

Except 3, I have them all figured out:

  1. {featureType:'all', elementType: 'geometry', stylers: [{color: '#242f3e'}]}

  2. {featureType: 'administrative.country', elementType: 'geometry.stroke', stylers: [{color: '#242f3e'}]}

  3. ??????? HOW DO i ACHIEVE THIS ?????

  4. {feature.type: 'administrative.country', elementType: 'labels.text.fill', stylers: [{color: '#746855'}]}

  5. {feature.type: 'administrative.province', elementType: 'labels.text.fill', stylers: [{color: '#746855'}]}

  6. {feature.type: 'administrative.locality', elementType: 'labels.text.fill', stylers: [{color: '#746855'}]}

But I am having problem achieving no. 3. And that is the question.

Please it will be great if you can test the solution you give in the JSFiddle given, because sometimes people give suggestions that don't even work.

enter image description here

Upvotes: 0

Views: 4041

Answers (1)

kboul
kboul

Reputation: 14600

You need to load a GeoJSON with all countries and attach a style.

You can visit this site here select all world regions and select for instance medium resolution and build a custom GeoJson containing all world countries.

You can rename it as you desire. I renamed it as countries.geo.json.

Following load a GoogleMaps, import the GeoJson and attach a style to it: Just make sure you have this html in the same place as countries.geo.json.

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 34.397, lng: 150.644},
          zoom: 2
        });
        // here import the GeoJson holding all the countries
        map.data.loadGeoJson('countries.geo.json');
        // here attach a style - I gave red fill and white stroke 
        map.data.setStyle(function(feature) {
            return /** @type {google.maps.Data.StyleOptions} */({
                fillColor: 'red',
                strokeColor: 'white',
                strokeWeight: 2
            });
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY&callback=initMap"
    async defer></script>
  </body>
</html>

Last but not least I want to mention that the API key is not mine. I borrowed it from developers.google.com here

Upvotes: 3

Related Questions