Fit bounds after opening infoWindow

2,371 views
Skip to first unread message

Walter Vos

unread,
Oct 9, 2010, 9:57:00 PM10/9/10
to Google Maps JavaScript API v3
So, I'm adding markers to the map and after adding them I open the
infoWindow attached to the first marker added with a click event. I
call fitBounds() before that to make sure all markers fit on the
screen. However, open the infoWindow often moves the map so that some
markers go 'out of bounds' so to speak. I tried this top fit the new
bounds after opening the infoWindow but that doesn't seem to work:

map.fitBounds(bounds);
google.maps.event.trigger(markers[0],'click');
var newBounds = map.getBounds();
bounds.extend(newBounds.getNorthEast());
map.fitBounds(bounds);

This results in the error "Uncaught TypeError: Cannot call method
'getNorthEast' of undefined". What am I doing wrong here? Should I
follow a different strategy to achieve what I want?

Rossko

unread,
Oct 10, 2010, 6:13:47 AM10/10/10
to Google Maps JavaScript API v3
> This results in the error "Uncaught TypeError: Cannot call method
> 'getNorthEast' of undefined". What am I doing wrong here? Should I
> follow a different strategy to achieve what I want?

It's probably a variable scope error, not enough context to tell.
http://groups.google.com/group/google-maps-js-api-v3/t/2b3f101fd509919e
The business with 'newBounds' wouldn't do anything useful anyway, no
infowindow has changed anything yet. You'd need to delay that until
after the infowindow action has finished panning, if it does.

You might like to to think about whether your users will be more
familiar with, or would prefer, a map that moves to accomodate an
infowindow or a map that zooms unexpectedly.

Walter Vos

unread,
Oct 10, 2010, 6:50:44 AM10/10/10
to Google Maps JavaScript API v3
Hi Rossko,

Thanks for you reply. I don't think it's about scope. Scope has always
puzzled me but as far as I can tell, newBounds is being set in the
same scope as newBounds.getNorthEast() is being called.

I tried debugging by using alert(map.getCenter()) to tell if the
center moves after the infoWindow is opened and you're right: it
doesn't.

About your final remark: I don't want the map to zoom unexpectedly. I
just want the map to load with all markers visible and one infoWindow
opened. After loading my users should be able to move around the map
and open infoWindow (without bounds changing again) as they wish.

This is the page where I'm trying to achieve this: http://www.degrensover.nu/.
My script is located at: http://www.degrensover.nu/wp-content/themes/degrensover.nu/makemap.js

So, what should I try to do next? Wait till after the opening of the
infoWindow has panned the map to get the new top right corner and
setting bounds? Or is their another way of figuring out what the new
bounds should be?

Kind regards,

- Walter

On 10 okt, 12:13, Rossko <ros...@culzean.clara.co.uk> wrote:
> > This results in the error "Uncaught TypeError: Cannot call method
> > 'getNorthEast' of undefined". What am I doing wrong here? Should I
> > follow a different strategy to achieve what I want?
>
> It's probably a variable scope error, not enough context to tell.http://groups.google.com/group/google-maps-js-api-v3/t/2b3f101fd509919e

Rossko

unread,
Oct 10, 2010, 8:25:48 AM10/10/10
to Google Maps JavaScript API v3
> Thanks for you reply. I don't think it's about scope. Scope has always
> puzzled me but as far as I can tell, newBounds is being set in the
> same scope as newBounds.getNorthEast() is being called.

I think you run into this issue ;
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/563ed63c2bd60749/ee6d047bc060c46c
getBounds() doesn't immediately return anything meaningful because of
the asynchronous nature of the API

> About your final remark: I don't want the map to zoom unexpectedly. I
> just want the map to load with all markers visible and one infoWindow
> opened.

The infowindow won't fit into the initial bounds set by the polyline.
So the API auto-pans the map to fit the whole infowindow in.
If you recalculate your bounds to fit both the infowindow and all the
markers, a zoom out may happen.
If you are only doing it at initialize time, that probably won't be a
problem.

Walter Vos

unread,
Oct 10, 2010, 12:30:13 PM10/10/10
to Google Maps JavaScript API v3
Hi Rossko,

Sure, I don't think that would be a problem either. But, do you have
any suggestions as to how to go about it? How should I make sure it
only happens once? What event should I listen to to make sure I get
the correct values?

- Walter

On 10 okt, 14:25, Rossko <ros...@culzean.clara.co.uk> wrote:
> > Thanks for you reply. I don't think it's about scope. Scope has always
> > puzzled me but as far as I can tell, newBounds is being set in the
> > same scope as newBounds.getNorthEast() is being called.
>
> I think you run into this issue ;
>  http://groups.google.com/group/google-maps-js-api-v3/browse_thread/th...

Rossko

unread,
Oct 10, 2010, 3:21:11 PM10/10/10
to Google Maps JavaScript API v3
> Sure, I don't think that would be a problem either. But, do you have
> any suggestions as to how to go about it?

There's two suggestions in the thread I pointed out ; one with a
setTimeout and one listening for bounds_changed.

> How should I make sure it
> only happens once?

If you were using the bounds_changed event for example, make a one-
time listener that removes itself after use.
Using the setTimeout method is perhaps less "correct", but if it works
- then you only have to call it the once from your initialize routine.
Reply all
Reply to author
Forward
0 new messages