CODEWITHSUNDEEP
javascriptgoogle-maps-api-3google-visualization
Samveen
Samveen

Reputation: 3540

zoomLevel parameter for Google Visualization not working

I'm creating a Google Chart Visualization of type Map with a single pin.

As per How to set zoomLevel in google Visualization Map api? , I should be able to use zoomLevel option to control initial zoom level . However, for me, this fails(the code):

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["map"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Lat', 'Long', 'Name'],
          [12, 77, 'Random location nearby'],
        ]);

        var map = new google.visualization.Map(document.getElementById('map_div'));
        map.draw(data, {showTip: true, zoomLevel: 10, mapType: "normal"});
      }

    </script>
  </head>

  <body>
    <h1>Drop Point Map</h1> <hr />
    <div id="map_div" style="width: 99%; height: 85%"></div>
  </body>
</html>

As you can see, zoomLevel: 10 is set, but I have no luck on the zoom level, which defaults to maximum zoom level (19)

Any ideas as to what I'm missing?

Source taken from Visualization: Map - Google Charts — Google Developers

fiddle demonstrating issue

Upvotes: 0

Views: 819

Answers (1)

geocodezip
geocodezip

Reputation: 161334

Looks like it is not working as documented. Possibly related issue in the issue tracker.

Confirmed as a bug that will be fixed in the next drop: https://code.google.com/p/google-visualization-api-issues/issues/detail?id=747

As a workaround, per that issue, drawing the map a second time, seems to work:

working fiddle

Added this to the example (which just delays a half second then redraws the map):

setTimeout(function () {
    map.draw(data, {
        showTip: true,
        zoomLevel: 10,
        mapType: "normal"
    });
}, 500);


google.load("visualization", "1", {
    packages: ["map"]
});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Lat', 'Long', 'Name'],
        [12, 77, 'Random location nearby'], ]);

    var map = new google.visualization.Map(document.getElementById('map_div'));
    map.draw(data, {
        showTip: true,
        zoomLevel: 10,
        mapType: "normal"
    });
    setTimeout(function () {
        map.draw(data, {
            showTip: true,
            zoomLevel: 10,
            mapType: "normal"
        });
    }, 500);
}
html, body, #map_div {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}
<script src="https://www.google.com/jsapi"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<h1>Drop Point Map</h1> 
<hr />
<div id="map_div" style="width: 99%; height: 85%"></div>

You can also use the undocumented work around that Dr.Molle posted in the question to which you refer (as he indicates "at your own risk").

There is a timing issue; you have to delay the set of the zoom until the map has finished rendering.

google.load("visualization", "1", {
    packages: ["map"]
});
google.setOnLoadCallback(drawChart);

function drawChart() {
    google.visualization.Map.prototype.getMap = function () {
        for (var k in this) {
            if (this[k].constructor == google.maps.Map) return this[k];
        }
    }
    var data = google.visualization.arrayToDataTable([
        ['Lat', 'Long', 'Name'],
        [12, 77, 'Random location nearby']
    ]);

    var map = new google.visualization.Map(document.getElementById('map_div'));
    map.draw(data, {
        showTip: true,
        zoomLevel: 10,
        mapType: "normal"
    });
    setTimeout(function () {
        console.log(map.getMap().getZoom() + ":" + map.getMap().getCenter());
        map.getMap().setZoom(12);
    }, 500);
}

proof of concept fiddle

code snippet:

google.load("visualization", "1", {
  packages: ["map"]
});
google.setOnLoadCallback(drawChart);

function drawChart() {
  google.visualization.Map.prototype.getMap = function() {
    for (var k in this) {
      if (this[k].constructor == google.maps.Map) return this[k];
    }
  }
  var data = google.visualization.arrayToDataTable([
    ['Lat', 'Long', 'Name'],
    [12, 77, 'Random location nearby']
  ]);

  var map = new google.visualization.Map(document.getElementById('map_div'));
  map.draw(data, {
    showTip: true,
    zoomLevel: 10,
    mapType: "normal"
  });
  google.maps.event.addListenerOnce(map.getMap(), 'idle', function() {
    console.log(map.getMap().getZoom() + ":" + map.getMap().getCenter());
    map.getMap().setZoom(12);
  });
}
html,
body,
#map_div {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://www.google.com/jsapi"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<h1>Drop Point Map</h1> 
<hr />
<div id="map_div" style="width: 99%; height: 85%"></div>

Upvotes: 1

Related Questions