Googlemaps opening in Fancybox. 2nd load seems offset.

[Garve Scott-Lodge]

Test page
http://spp.demo-website.co.uk/admin/google_maps_test.html

Clicking the map link beside a property opens a jQuery Fancybox with
the map in it. The code for this is drawn in using AJAX. The code in
the AJAX file is:

<script>

var latlng = new google.maps.LatLng(57.55, -4.75);

var myoptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myoptions);

var marker = new google.maps.Marker({
position: latlng,
map: map
});


</script>

This works fine on viewing the first map. Close the fancybox down and
click the other map link and you'll see the map is mainly grey,
looking like it's offset out of the window. If you refresh the page it
should work fine the first time again.

Tested in FF3 and IE8 on XP.

I've read a few posts saying that
google.maps.event.trigger(map, "resize");
should reset it, but haven't worked out how or where to use this (in
the main page or the ajax file)? Any ideas?

cheers

Garve

[Garve Scott-Lodge]

I've added a graphic at
http://spp.demo-website.co.uk/admin/google_maps_test.jpg
in case this isn't evident on all platforms.

[Luke Mahé]

You need to make sure that you trigger the resize event on the map when you show it again.

google.maps.event.trigger(map, 'resize');

-- Luke

--
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.

[Garve Scott-Lodge]

Thanks Luke, I'd pretty much gleaned that from various forums, but
despite adding that bit of code in various places it does nothing.

Should I be adding it to the ajax file, or somewhere in the head of
the calling page?

cheers

Garve

[Garve Scott-Lodge]

Should I be supplying any other information?

cheers

Garve

[Garve Scott-Lodge]

Rather quiet here. Anyway, I eventually found a partial solution, so
in case it helps anyone I'll add it here. (Note, I don't really have
much idea what I'm doing.)

In the head of my main document I have a normal jQuery call to
Fancybox.

$('.fancybox').fancybox();

which is triggered by clicking a link to an external file.

<a href="mymapsfile.asp?property_id=123" class="fancybox">click for
map</a>

It seems that on closing down the fancybox layer, then clicking again,
the map gets confused as to where its centre is due to it having no
dimensions at some point. I tried adding the code
google.maps.event.trigger(map, 'resize'); in various places, but
couldn't get it to work. Finally I realised that it would have to be
called after the 2nd fancybox had fully opened, and the map had
dimensions again. This entailed changing the code in the head of the
main document to

$('.fancybox').fancybox({
'onComplete':function() {
$('#map_canvas').css({'border':'1px solid #246681'});
google.maps.event.trigger(map, 'resize');
}
});

The resize command is only called once the new fancybox layer exists.
However, I did have an issue, in that the center of the map was
miscalculated, and the marker which should be showing in the center
was just off the map to the top-left. I haven't been able to solve
that, so I've added an extra line to zoom the map out, which at least
makes the marker visible.

$('.fancybox').fancybox({
'onComplete':function() {
$('#map_canvas').css({'border':'1px solid #246681'});
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() - 1 );
}
});

cheers

Garve