How to stretch the bounds equals with the canvas size?

Question

Using fitBounds function of Google Map API v3 always makes the bound smaller than the canvas size as follwing:

gMap.fitBounds(bounds);
new google.maps.Rectangle({
                    strokeColor: '#0000FF',
                    strokeOpacity: 0.8,
                    strokeWeight: 1,
                    fillColor: '#0000FF',
                    fillOpacity: 0.05,
                    map: gMap,
                    bounds: bounds
                });

enter image description here

Is there a way to make the bound fit with the canvas size?

score 0 · Answer 1 · edited May 23 '17 at 12:01

0

Calculate the map center and zoom required to fit your bounds yourself, then set them using map.setOptions({center:calculatedCenter, zoom: calculatedZoom});

One possible way to do that: Calculate bounds from center and zoom (Google Maps API v3) (calculates the bounds from the center and zoom, you need to calculate the zoom level from the bounds and the div size)

edited May 23 '17 at 12:01

Community

1
1

answered Jun 22 '13 at 13:47

geocodezip

158,664
13
220
245

score 0 · Answer 2 · edited May 23 '17 at 12:07

You cannot always have the bounds completely fill the canvas because zoom levels are discrete. That is, the zoom level can be set only to whole numbers, not fractions.

Using gMap.fitBounds() is one way to zoom the map so the entire bounds is displayed on the canvas, but it sometimes zooms in farther than necessary. If that is not acceptable, you can calculate the zoom level using the function in this answer.

How to stretch the bounds equals with the canvas size?

2 Answers2