Map FitBounds not zooming in

1,387 views
Skip to first unread message

CSharp

unread,
Apr 25, 2011, 3:33:42 PM4/25/11
to google-map...@googlegroups.com
I seem to have an issue with the Google Map's fitBound method not zooming into a set of LatLng's after the viewport has been adjusted and zoomed out.  For some reason, going back to the original set of LatLng's (or LatLngBounds), the zoom level and centering seems to be stuck for the bounds that were previously loaded.
 
Here's the link to what I mean:
 
 
Click on the following routes in sequence:
 
1) 10 Northeast Loop
2) 31 Bowness Loop
 
Unselect the 31 Bowness Loop
Select any other routes
Unselect all routes
Now, select 10 Northeast Loop
 
You'll see that the the Route for 10 Northeast Loop remains at the same zoomed out level, which is not similar to the state that it initially came into view the first time.  Also, the centering is off to the right.  I tried to setCenter on the bounds, but nothing seemed to work.  I also tried to gets a bunch of LatLng's to extended to the bounds and then get the SW and NE corners of the ViewPort and then fitBounds to that new LatLngBounds.  Still get the same result.
 
I'm at a loss right now.  Please help.
 

geoco...@gmail.com

unread,
Apr 25, 2011, 3:57:36 PM4/25/11
to Google Maps JavaScript API v3
On Apr 25, 12:33 pm, CSharp <aliquis.igno...@gmail.com> wrote:
> I seem to have an issue with the Google Map's fitBound method not zooming
> into a set of LatLng's after the viewport has been adjusted and zoomed out.  
> For some reason, going back to the original set of LatLng's (or
> LatLngBounds), the zoom level and centering seems to be stuck for the bounds
> that were previously loaded.
>
> Here's the link to what I mean:
>
>  http://demo.mentormyride.com/public/map.aspx

I don't see any routes in FF (3.0.5):
Error: JSON is not defined
Source File: http://demo.mentormyride.com/Scripts/map.js
Line: 1372

>
> Click on the following routes in sequence:
>
> 1) 10 Northeast Loop
> 2) 31 Bowness Loop
>
> Unselect the 31 Bowness Loop
> Select any other routes
> Unselect all routes
> Now, select 10 Northeast Loop
>
> You'll see that the the Route for 10 Northeast Loop remains at the same
> zoomed out level, which is not similar to the state that it initially came
> into view the first time.  Also, the centering is off to the right.  I tried
> to setCenter on the bounds, but nothing seemed to work.  I also tried to
> gets a bunch of LatLng's to extended to the bounds and then get the SW and
> NE corners of the ViewPort and then fitBounds to that new LatLngBounds.  
> Still get the same result.
>
> I'm at a loss right now.  Please help.

Sounds like you need to clear out the bounds when you uncheck boxes.
Looks like you are trying to do that, but seems like it isn't
working. Hard to tell for sure as I can't see it in action.

-- Larry

Rossko

unread,
Apr 25, 2011, 4:12:42 PM4/25/11
to Google Maps JavaScript API v3
> Click on the following routes in sequence:
>
> 1) 10 Northeast Loop

Fails at that point for me in FF2
"JSON is not defined"
http://demo.mentormyride.com/Scripts/map.js
Line 1372

CSharp

unread,
Apr 25, 2011, 5:24:07 PM4/25/11
to google-map...@googlegroups.com
Hmmm, I'm not seeing any Javascript error in Firefox using FireBug.  Here's the code from the map.js that should be binding the map bounds:
 
MapObject.prototype.SetMapBounds = function()
{ var me = this;
  var currentMapBounds = null; //Creates a new map bounds every time the route/pattern is displayed or removed from map
 
 $(me.m_routePatternsArray).each(function()
 { if(this.IsShowing)
    { if(currentMapBounds)
          currentMapBounds.union(this.MapBounds);
      else
          currentMapBounds = this.MapBounds;
     }
   });
 
  if(currentMapBounds)
      me.m_map.fitBounds(currentMapBounds); //Fit the map bounds of the markers into the map canvas
}
 
 
 
So, from that code, it will do a fitBounds only if the bounds are available.  Otherwise, the fitBounds is not executed.  Is there a method to clear out the mapBounds for the map?
 
 

geoco...@gmail.com

unread,
Apr 25, 2011, 5:30:31 PM4/25/11
to Google Maps JavaScript API v3
On Apr 25, 2:24 pm, CSharp <aliquis.igno...@gmail.com> wrote:
> Hmmm, I'm not seeing any Javascript error in Firefox using FireBug.  

What version of Firefox are you running?

CSharp

unread,
Apr 25, 2011, 5:39:55 PM4/25/11
to google-map...@googlegroups.com
I'm currently running FireFox 3.6.3 with FireBug 1.6.1

geoco...@gmail.com

unread,
Apr 25, 2011, 5:44:27 PM4/25/11
to Google Maps JavaScript API v3
On Apr 25, 2:39 pm, CSharp <aliquis.igno...@gmail.com> wrote:
> I'm currently running FireFox 3.6.3 with FireBug 1.6.1

FYI - native JSON support was added to Firefox in 3.5:
https://developer.mozilla.org/En/Using_native_JSON

-- Larry

Michael Geary

unread,
Apr 25, 2011, 6:06:34 PM4/25/11
to google-map...@googlegroups.com
The JSON error that the other guys reported is unrelated to the bounds error you're asking about. That's simply a matter of doing a better existence test where you load json2.min.js. Change this code in your map page:

<!--[if lt IE 8]> <script src="../Scripts/json2.min.js" type="text/javascript"></script> <![endif]-->

to:

    <script type="text/javascript">
        if( ! window.JSON )
            document.write( '<script type="text/javascript" src="../Scripts/json2.min.js"><\/script>' );
    </script>

The problem with the bounds is more subtle, and it is indeed a bug in the SetMapBounds function.

When you execute this statement:

    currentMapBounds = this.MapBounds;

currentMapBounds does not get a new *copy* of this.MapBounds, it gets a reference to the this.MapBounds object *itself*.

So, when you later execute this statement:

    currentMapBounds.union(this.MapBounds);

the target of the union is not just currentMapBounds, you are really reaching back and modifying whatever 'this.MapBounds' you were using in the first statement - because that is the very same object as currentMapBounds.

So in your test case, when you check the second route and it does the union(), it's actually enlarging the bounds of the *first* route. That's why the first route's bounds remain enlarged when you come back to it after clearing all the checkboxes.

You could easily fix that by changing this bit of code:

    if( currentMapBounds )
        currentMapBounds.union( this.MapBounds );
    else
        currentMapBounds = this.MapBounds;
    }

to:

    if( ! currentMapBounds )
        currentMapBounds = new google.maps.LatLngBounds();
    currentMapBounds.union( this.MapBounds );

Now you always create a new LatLngBounds object to receive the union of any individual LatLngBounds objects.

-Mike

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.

Michael Geary

unread,
Apr 25, 2011, 6:08:58 PM4/25/11
to google-map...@googlegroups.com
Just a minor update to my reply - the } character highlighted below was a copy and paste error, not part of the code you should replace.

CSharp

unread,
Apr 25, 2011, 6:22:08 PM4/25/11
to google-map...@googlegroups.com
Thanks so much Michael!  The explanation was awesome and the code change as you've suggested did the trick.

Rossko

unread,
Apr 25, 2011, 6:24:05 PM4/25/11
to Google Maps JavaScript API v3
> So, from that code, it will do a fitBounds only if the bounds are
> available.  Otherwise, the fitBounds is not executed.  Is there a method to
> clear out the mapBounds for the map?

MapBounds is not a property or method of an API map object ; it is a
property that your code creates and assigns to each of the objects
your CreateMarkers() method I think attaches to your
m_routePatternsArray of your MapObject?
Reply all
Reply to author
Forward
0 new messages