Map centering is off with second map load

[Chris Oakeson]

I'm using V3 on byucougars.com for giving directions to sporting events, etc.  Maps popup in a fancybox via an AJAX call.  The first map is centered correctly, but successive calls are not centering the map correctly.  The correct center is displayed in the upper-left corner of the canvas with a marker showing where the center should be.

See http://byucougars.com/schedule/m-football and click on any of the venues for the football game (ie. "Oxford, MS Vaught-Hemingway Stadium" on the first row). The map is centered correctly in that first fancybox.  Close the window, and click the same link again to display the same map, and the center has moved to the top-left.

Another example appears in http://byucougars.com/m-football/event/2011/ole-miss where there is a map loaded inline with the page located in the right column just above the weather widget.  Since that is the first map loaded on the page, the second map displayed will show the center in the top-left of the canvas.  So, clicking on "Get directions to this event" beneath the Location header and address, you will see the same issue with the center at the top-left.

I've tested initializing the map with the center moved over so it appears the marker is in the center.  That hack fails because the first map loaded on the schedule list page shows the marker in the bottom-right corner.  Successive calls do, however, make the marker appear in the center of the canvas.

I'm very confident that this problem has to do with either fancybox or displaying maps after an AJAX call.  Any ideas about what might be happening, or suggestions on what could fix this problem?

[geoco...@gmail.com]

On Oct 26, 11:26 am, Chris Oakeson <chrisoake...@gmail.com> wrote:
> I'm using V3 on byucougars.com for giving directions to sporting events,
> etc.  Maps popup in a fancybox via an AJAX call.  The first map is centered
> correctly, but successive calls are not centering the map correctly.  The
> correct center is displayed in the upper-left corner of the canvas with a
> marker showing where the center should be.

Sounds like a "zero size div" problem.

Have you searched the group?
http://groups.google.com/group/google-maps-js-api-v3/search?group=google-maps-js-api-v3&q=upper+left&qt_g=Search+this+group

The usual solution is to make sure the map is displayed, then
initialize it or use the resize event to cause it to adjust to the
div's new size.

http://code.google.com/apis/maps/documentation/javascript/reference.html#Map

resize None Developers should trigger this event on the map when the
div changes size: google.maps.event.trigger(map, 'resize') .

-- Larry


>
> Seehttp://byucougars.com/schedule/m-footballand click on any of the
> venues for the football game (ie. "Oxford, MS<http://byucougars.com/directions_canvas/js/34.361897/-89.533692&name=...>
>  Vaught-Hemingway Stadium<http://byucougars.com/directions_canvas/js/34.361897/-89.533692&name=...>"

> on the first row). The map is centered correctly in that first fancybox.
>  Close the window, and click the same link again to display the same map,
> and the center has moved to the top-left.
>

> Another example appears inhttp://byucougars.com/m-football/event/2011/ole-misswhere there is a map