CODEWITHSUNDEEP
google-maps
Toshiro007
Toshiro007

Reputation: 77

Display regions in google maps API

So, I want to get a region of 'Lampung' but it is displayed as a region, not markers. My code is using geochart API. Here is my code :

google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawMarkersMap);

function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
  ['Province'],
  ['Lampung'],
  ['Banten'],

  ]);

var options = {
  region: '035', //South-East Asia
  displayMode: 'regions',
  colorAxis: {colors: ['#00853f', 'blue', '#e31b23']},
};

var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};

But the problem is, the result doesn't show any regions yet. It's just a map without any displayMode. Next problem is, if I add this to 'options':

resolution: 'provinces'

The result is just a blank web without the map. What's wrong here?

Upvotes: 0

Views: 1919

Answers (1)

ztan
ztan

Reputation: 6921

I think your region '035' is too large, you should zoom your region to a smaller area, in your case, you should use options['region'] = 'ID';

You can try with the below code, it should show 2 orange regions in your 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([
         ['Province'],
         ['Lampung'],
         ['Banten']
      ]);

      var options = {};
      options['region'] = 'ID';
      options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors
      options['dataMode'] = 'regions';

      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>

Upvotes: 3

Related Questions