如何在Google Visualization Map API中设置zoomLevel？

Question

I am trying to implement visualization map api,following this link https://developers.google.com/chart/interactive/docs/gallery/map

i am successfully drawing the point on the google map but not able to set the zoomlevel. For single point the zoomlevel automatic set to 19(max level).

my code:-

var map = new google.visualization.Map(document.getElementById('map_div'));

map.draw(data, {showTip: true, zoom:14,  mapType: 'normal', useMapTypeControl:true, enableScrollWheel:false});

I have tried this map.setZoom(12) but its not working.

Answer 1

The name of the property that defines the zoom-level in google.visualization.Map is not zoom ,

it's called zoomLevel (funny, the title of your question contains the correct answer^^)

---

However, it's curious that the visualization-API does not provide a method to access the underlying google.maps.Map -instance.

You may add such a method (on your own risk), add this to the onload-callback:

google.visualization.Map.prototype.getMap=function(){
  for(var k in this){
   if(this[k].constructor==google.maps.Map)return this[k];
  }
}

you now may access the google.maps.Map -instance by calling the method getMap of the google.visualization.Map -instance.

Example:

map.getMap().setZoom(12);

Answer 2

That is because the map object has no setZoom method according to the documentation page that you have given.

You can probably try redrawing the map using using draw method like this

var newZoom = 12;
map.draw(data, {showTip: true, zoom:newZoom,  mapType: 'normal', useMapTypeControl:true, enableScrollWheel:false});