Google Charts (GeoChart) - Zoom in closer - google-visualization

Question

Using Google Charts GeoChart: https://google-developers.appspot.com/chart/interactive/docs/gallery/geochart
Is it possible to zoom in closer than just an overall region? That is, to get to street-view level of a map, and still place markers as seen in the marker example on the link above?
Thanks all for the help...

Answer 1

The API does not support zooming, dragging, or scrolling.

Answer 2

As a trick, I used css zoom property with overflow:hidden on container. But it should be executed after chart.draw(), on google chart ready event.
And if you need to redraw (I'm redrawing on window resize to guarantee responsiveness), you should force zoom to 1 or 100% again before draw it again.
HTML:
<div id="container" style="overflow:hidden; width:..px;">
<div id="chart_div"></div>
</div>
JS (jquery):
$("#chart_div").css("zoom",1);
// [... google chart code generation ...]
google.visualization.events.addListener(chart, 'ready', function() { $("#chart_div").css("zoom",1.4); });
chart_draw(data, options);
It worked for me and it is worth the try.

Answer 3

I had the same problem, and GeoChart proved to be too limited in that regard.
One option is to use Google Maps and Data Layers. If you need markers with colors and sizes, for example, you could do something like the example on the following page (see 'advanced style'):
https://developers.google.com/maps/documentation/javascript/examples/layer-data-quakes
You'll need to implement your own interpolation to determine sizes and colors, but the resulting map/chart will be better than GeoChart alone.

Answer 4

It looks like Google Charts now has an expiremental option called 'explorer' that works for some chart types. See:
https://developers.google.com/chart/interactive/docs/gallery/linechart#Configuration_Options

Answer 5

You could try to generate a select event on marker click and in the event function you could change the region of the chart by changing chartOptions as follows:
google.visualization.events.addListener(chart, 'select', () => {
// console.log(this.continents);
if (continents.includes( continentData.getValue(chart.getSelection()[0].row, 2))) {
chartOptions.region = '053';
// 002 - Africa
// 150 - Europe
// 019 - Americas 021 - Northern America 005- South America 013- Central America 029 - Caribbean
// 142 - Asia
// 009 - Oceania
// 053 - Australia and New Zealand
chart.draw(continentData, chartOptions);
}
});