gray patches in google map

201 views
Skip to first unread message

jay K.

unread,
Jun 30, 2011, 2:56:14 PM6/30/11
to Google Maps JavaScript API v3

Hello

I have a map in the following website:

http://dev.takeoff-english.com/sprachreisen/englischschulen/

in order to see it, you must select a "School", so please follow these
steps

1 Selected a country, city and school under "Wähle deine Schule" in
the top left box

2 You will see a picture of the selected school and a menu at the mid-
right section, containing the following options:

Schule
Kurse
Unterkunft
Preise
Fotos
Standort

3 Please selected the option "Standort" and you will see the map. The
problem is that most of it as grey, except for a small portion at the
top left corner

The code to generate the map is the following:

var myOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(map_latitude, map_longitude)
};

var map = new google.maps.Map(school_map, myOptions);

Thanks for your support


PS: somehow the map comes up fully after clicking on the "Google"
button at the bottom-right corner of the map (not the one shown on the
Google link, but the same map with the initial gray patches)

geoco...@gmail.com

unread,
Jun 30, 2011, 4:12:17 PM6/30/11
to Google Maps JavaScript API v3
On Jun 30, 11:56 am, "jay K." <jay.developer2...@gmail.com> wrote:
> Hello
>
> I have a map in the following website:
>
> http://dev.takeoff-english.com/sprachreisen/englischschulen/
>
> in order to see it, you must select a "School", so please follow these
> steps
>
> 1 Selected a country, city and school under "Wähle deine Schule" in
> the top left box
>
> 2 You will see a picture of the selected school and a menu at the mid-
> right section, containing the following options:
>
> Schule
> Kurse
> Unterkunft
> Preise
> Fotos
> Standort
>
> 3 Please selected the option "Standort" and you will see the map. The
> problem is that most of it as grey, except for a small portion at the
> top left corner

Sounds like a zero size div problem:
http://groups.google.com/group/google-maps-js-api-v3/search?group=google-maps-js-api-v3&q=top+left+corner&qt_g=Search+this+group

Try triggering the resize event on your map object after it is
displayed.

-- Larry

jay K.

unread,
Jun 30, 2011, 4:30:50 PM6/30/11
to google-map...@googlegroups.com
Thanks, Larry

Although I haven't found a solution for my map problem I added a jquery resize function and it displayed the map fully

Now I guess I have to find a way to trigger the resize without resizing the window myself for the map to show properly

any suggestions?

Jay

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


geoco...@gmail.com

unread,
Jun 30, 2011, 7:41:37 PM6/30/11
to Google Maps JavaScript API v3
On Jun 30, 4:30 pm, "jay K." <jay.developer2...@gmail.com> wrote:
> Thanks, Larry
>
> Although I haven't found a solution for my map problem I added a jquery
> resize function and it displayed the map fully
>
> Now I guess I have to find a way to trigger the resize without resizing the
> window myself for the map to show properly
>
> any suggestions?

The same as before: trigger the resize event on the GMap object when
it is displayed.

from the documentation:
http://code.google.com/apis/maps/documentation/javascript/reference.html#Map
resize Developers should trigger this event on the map when the div
changes size: google.maps.event.trigger(map, 'resize') .

When you display a hidden div, the size the browser reports changes
from zero to the actual size.

-- Larry

>
> Jay
>
> On Thu, Jun 30, 2011 at 4:12 PM, geocode...@gmail.com
> <geocode...@gmail.com>wrote:
>
>
>
>
>
>
>
> > On Jun 30, 11:56 am, "jay K." <jay.developer2...@gmail.com> wrote:
> > > Hello
>
> > > I have a map in the following website:
>
> > >http://dev.takeoff-english.com/sprachreisen/englischschulen/
>
> > > in order to see it, you must select a "School", so please follow these
> > > steps
>
> > > 1 Selected a country, city and school under "Wähle deine Schule" in
> > > the top left box
>
> > > 2 You will see a picture of the selected school and a menu at the mid-
> > > right section, containing the following options:
>
> > > Schule
> > > Kurse
> > > Unterkunft
> > > Preise
> > > Fotos
> > > Standort
>
> > > 3 Please selected the option "Standort" and you will see the map. The
> > > problem is that most of it as grey, except for a small portion at the
> > > top left corner
>
> > Sounds like a zero size div problem:
>
> >http://groups.google.com/group/google-maps-js-api-v3/search?group=goo...
Reply all
Reply to author
Forward
0 new messages