Re: google maps not showing correctly

[Sean Montgomery]

Good question Ben. I'm cc-the class.

I struggled with that one for a good long while on an app I was making. When you change the size of the div containing the google map, or show and hide the div, you should call:

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

Some links:

http://stackoverflow.com/questions/3437907/google-maps-api-resizing-generates-blank-white-space

http://dougmolineux.com/wp/?p=242

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

If you want to get fancy, you could even add an event listener. Here's one in jquery:

http://techxplorer.com/2011/10/04/resize-a-google-map-dynamically/

Sean

On Fri, Feb 24, 2012 at 4:39 PM, Ben Turner <exte...@benturner.com> wrote:

Prof. Montgomery,

Phil and I are having difficulty with Google Maps not loading correctly into a DIV.  It appears as though there's a problem with Google Maps not setting itself in the right position within the DIV, so half of the map data appears as gray.

Here's the code: https://github.com/Xeus/StreetEyes/tree/master/assets/www

index.html is loading js/custom.js.

We've spent a ton of time trying to figure this one out, including re-triggering the map so it'd resize, but we can't get it to work.  Ideas?

-Ben

[Ben Turner]

We ended up working around the problem by calling the resize event every time the button link to that page is clicked. (we have all the "pages" in one index.html document)  Now the map loads partially at first, but is resized quickly afterwards.  It sort of works!

But there's still some wacky layout/DIV/design bug in there, I think.  Hoping this won't cause more problems once we start adding location markers and other things depending on the map rendering correctly.

We are also experiencing very stop-and-go scrolling.  I'm not sure if this is because of jQuery Mobile + Ice Cream Sandwich or what (that's how I'm testing it), but is anyone else having less-than-smooth scrolling in their phone apps?

-Ben