maps put center in top left hand corner of div.

2,013 views
Skip to first unread message

Tonks

unread,
Jul 12, 2011, 7:11:45 PM7/12/11
to google-map...@googlegroups.com
I am writing a webapp using iui which has everything on one page and navigates between different <div>'s.  I have a list of places which the user can choose and he is then shown a route from the nearest motorway junction to the chosen place.  this works fine the first time the map is initialized.  But then if the user goes back and chooses a different place, the map is re rendered in the same div but the center point of the defined route is put at the top left of the div.  This does not happen all the time and it sometimes works fine which is very confusing.  The code calls the initialize function every time a new map is needed.  Is this the wrong way to do this?

Luke Mahé

unread,
Jul 12, 2011, 7:20:59 PM7/12/11
to google-map...@googlegroups.com
If the div is not visible or has a size of 0 when it is created then you need to trigger the resize event on the map when it is later displayed.

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

-- Luke


On Wed, Jul 13, 2011 at 9:11 AM, Tonks <tstrea...@googlemail.com> wrote:
I am writing a webapp using iui which has everything on one page and navigates between different <div>'s.  I have a list of places which the user can choose and he is then shown a route from the nearest motorway junction to the chosen place.  this works fine the first time the map is initialized.  But then if the user goes back and chooses a different place, the map is re rendered in the same div but the center point of the defined route is put at the top left of the div.  This does not happen all the time and it sometimes works fine which is very confusing.  The code calls the initialize function every time a new map is needed.  Is this the wrong way to do this?

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-maps-js-api-v3/-/EHA3iQloYlsJ.
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.

Tonks

unread,
Jul 12, 2011, 7:49:45 PM7/12/11
to google-map...@googlegroups.com
Hi luke

Thanks for the reply but the div is visible when the map is initialized as the initialize function is called by an onfocus event for the div.

Here is a link to my dev area  http://streatnet.dyndns.org/mb/dev.html

The screen size is set up for an iphone but chrome shows the problem up as well.  The center should be between the two markers.

Thanks

Tony

Tonks

unread,
Jul 13, 2011, 3:49:19 PM7/13/11
to google-map...@googlegroups.com
Hi luke

Thanks for your help.  Your suggestion seems to have worked.  It was 1am in the morning when I got your reply and was so tired, I made the change in the wrong script.  

Thanks again.

Tony
Reply all
Reply to author
Forward
0 new messages