Display only a specific country (region) in google maps

javascript google-maps geolocation country

31,126

It can be done using GeoMap API. Please check following url for reference.

1) https://code.google.com/apis/ajax/playground/?type=visualization#geo_map

2) https://developers.google.com/chart/interactive/docs/gallery/geomap#regionsexample

Here is the example to load US region map.

<html>
<head>
  <script type='text/javascript' src='https://www.google.com/jsapi'></script>
  <script type='text/javascript'>
      google.load('visualization', '1', { 'packages': ['geomap'] });
      google.setOnLoadCallback(drawMap);

      function drawMap() {
          var data = google.visualization.arrayToDataTable([
            ['City', 'Popularity'],
            ['New York', 200],
            ['Boston', 300],
            ['Miami', 400],
            ['Chicago', 500],
            ['Los Angeles', 600],
            ['Houston', 700]
          ]);

          var options = {};
          options['region'] = 'US';
          options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors
          options['dataMode'] = 'markers';
          options['width'] = '556px';

          var container = document.getElementById('map_canvas');
          var geomap = new google.visualization.GeoMap(container);
          geomap.draw(data, options);
      };

  </script>
</head>

<body>
    <div id='map_canvas'></div>
</body>

</html>

31,126

Author by

Cristiano Sarmento

Full stack developer, working for 7+ years with web and mobile technologies, both server and client side. Currently using mainly NodeJS, Angular, MongoDB, MySQL and VueJS to create fast and reliable web/mobile and IOT applications. Developing applications to collect and analyze big data from sensors like cameras and wi-fi devices. Using Facial Recognition to identify people and it's characteristics.

Updated on July 09, 2022

Comments

Cristiano Sarmento almost 2 years

Is there any way to show only a specific country or region using the google maps API?
- geocodezip over 10 years
  
  What do you mean by that?
- geocodezip over 10 years
  
  Probably should have been clearer (but you should have been too), there are lots of ways to 'show only a specific country or region', what do you mean by that? What are your requirements? What have you tried? Have you looked at any of the documentation?
Cristiano Sarmento about 6 years

Thanks, i tried it and it works as i expected!
himanshu almost 4 years

Where to add GoogleMapApiKey in above code.
Saad Abbasi almost 4 years

Can you help me how to use the same map for more than one region, eg when I click on "US" it show me CHOOSE REGION " Alaska Arizona Arkansas etc.."