Map.fitBounds(), zoom and center after resizing the map

[Mislav Marohnić]

In V2, this was my method for auto-center+zoom a map given a LatLngBounds:

  autoZoom: function() {

    this.map.setCenter(

      this.bounds.getCenter(),

      this.map.getBoundsZoomLevel(this.bounds).atMost(15)

    )

    return this

  }

In case some clarification is needed:

• "this.bounds" is a reference to a LatLngBounds object that is constructed by appending locations to it by its "extend()" method;
• "atMost()" is a convenience method that brings the number down to a given maximum.

In V3, there is no Map.getBoundsZoomLevel(). So I written "autoZoom()" like this:

  this.map.fitBounds(this.bounds)

The first problem is I cannot adjust the maximum zoom level this way. In the next line I tried a workaround:

  this.map.set_zoom(this.map.get_zoom().atMost(15))

I hoped this will reset the zoom level to 15 if it was greater. This doesn't work, however, because I discovered that the zoom level change triggered by "map.fitBounds()" above happens asynchronously. The code following the fitBounds call can't inspect the new zoom value because "map.get_zoom()" will still return the old value. So I worked around this by event handling.

The second problem, to which I still haven't found a workaround, is that after resizing the map (applying width/height styles to the mapDiv), centering does not work properly. If I call "map.fitBounds()" again to readjust the map to encompass the marker locations, it zooms and centers the map as if the map was still the original size, regardless of the fact that it's now bigger.

Here's a screenshot that illustrates this. (Sorry, the map is not yet online.) While the map was at the original size (red bounding box), "fitBounds" method worked properly. The bug is that after resizing, "fitBounds" operates exactly like the map was still in the red bounding box.

In API V2, I used the "map.checkResize()" method after CSS operations. Will there be an equivalent?

Thank you

[Geuis]

I had a somewhat similar problem that I just figured out.

Mapmarkers is an array containing latlng() objects.
this.map is a reference to the Google map that I created elsewhere.

//fit points to map
var mapbounds = new google.maps.LatLngBounds();
for(var i=0; i<this.mapmarkers.length; i++){
mapbounds.extend( this.mapmarkers[i].position );
}

//get center of extended points and set it on the map
this.map.set_center( mapbounds.getCenter() );

//set minmarkers if undefined
if(!minmarkers)
var minmarkers = 0;

//apply user-defined zoom level to points on map
if(this.mapmarkers.length <= minmarkers){

this.map.set_zoom( this.map.zoom );

}else{
//fit map using map api function
this.map.fitBounds(mapbounds);

}



On Aug 3, 10:28 am, Mislav Marohnić <mislav.maroh...@gmail.com> wrote:
> In V2, this was my method for auto-center+zoom a map given a LatLngBounds:
>   autoZoom: function() {
>     this.map.setCenter(
>       this.bounds.getCenter(),
>       this.map.getBoundsZoomLevel(this.bounds).atMost(15)
>     )
>     return this
>   }
>
> In case some clarification is needed:
>

>    - "this.bounds" is a reference to a LatLngBounds object that is

>    constructed by appending locations to it by its "extend()" method;

>    - "atMost()" is a convenience method that brings the number down to a

>    given maximum.
>
> In V3, there is no Map.getBoundsZoomLevel(). So I written "autoZoom()"
> like this:
>
>   this.map.fitBounds(this.bounds)
>
> The first problem is I cannot adjust the maximum zoom level this way. In the
> next line I tried a workaround:
>
>   this.map.set_zoom(this.map.get_zoom().atMost(15))
>
> I hoped this will reset the zoom level to 15 if it was greater. This doesn't
> work, however, because I discovered that the zoom level change triggered by

> "map.fitBounds()" above happens *asynchronously*. The code following the

> fitBounds call can't inspect the new zoom value because "map.get_zoom()"
> will still return the old value. So I worked around this by event handling.
>
> The second problem, to which I still haven't found a workaround, is that

> after *resizing* the map (applying width/height styles to the mapDiv), *
> centering* does not work properly. If I call "map.fitBounds()" again to

> readjust the map to encompass the marker locations, it zooms and centers the
> map as if the map was still the original size, regardless of the fact that
> it's now bigger.
>
> Here's a screenshot that

> illustrates<http://skitch.com/mmarohnic/b3945/map-v3-resizing-centering-issue>this.

[chris]

Hi Mislav,

I was having the same problem with trying to set a maximum zoom level.
I solved this by registering a listener on the 'zoom_changed' event.
I'm not sure if this is the optimal solution, but it works. :)

map.fitBounds(bounds);
google.maps.event.addListener(map, 'zoom_changed', function() {
if ( map.get_zoom() > 16 ) {
map.set_zoom(16);

}
});

On Aug 3, 10:28 am, Mislav Marohnić <mislav.maroh...@gmail.com> wrote:

> In V2, this was my method for auto-center+zoom a map given a LatLngBounds:
>   autoZoom: function() {
>     this.map.setCenter(
>       this.bounds.getCenter(),
>       this.map.getBoundsZoomLevel(this.bounds).atMost(15)
>     )
>     return this
>   }
>
> In case some clarification is needed:
>

>    - "this.bounds" is a reference to a LatLngBounds object that is

>    constructed by appending locations to it by its "extend()" method;

>    - "atMost()" is a convenience method that brings the number down to a

>    given maximum.
>
> In V3, there is no Map.getBoundsZoomLevel(). So I written "autoZoom()"
> like this:
>
>   this.map.fitBounds(this.bounds)
>
> The first problem is I cannot adjust the maximum zoom level this way. In the
> next line I tried a workaround:
>
>   this.map.set_zoom(this.map.get_zoom().atMost(15))
>
> I hoped this will reset the zoom level to 15 if it was greater. This doesn't
> work, however, because I discovered that the zoom level change triggered by

> "map.fitBounds()" above happens *asynchronously*. The code following the

> fitBounds call can't inspect the new zoom value because "map.get_zoom()"
> will still return the old value. So I worked around this by event handling.
>
> The second problem, to which I still haven't found a workaround, is that

> after *resizing* the map (applying width/height styles to the mapDiv), *
> centering* does not work properly. If I call "map.fitBounds()" again to

> readjust the map to encompass the marker locations, it zooms and centers the
> map as if the map was still the original size, regardless of the fact that
> it's now bigger.
>
> Here's a screenshot that

> illustrates<http://skitch.com/mmarohnic/b3945/map-v3-resizing-centering-issue>this.