Question

I’m trying to get a PhoneGap application for Android running (using Eclipse with PhoneGap for Andoroid plugin) featuring a Google Map. Essentially it seems to work. However, there some glitches when displaying the map. I have no phone at hand, only the emulator. The map looks, for example, like the picture below:

The controls and this ‘Terms of Use’ are all there, but there are parts missing from the map. When I move the map it slides also empty/grey areas. But after refreshing/reloading, parts of the map vanish again. And it’s not always the same area, sometimes smaller, sometimes a bit larger. But never the full area is filled with the map.

Is this an error/glitch of the emulator. When searching for problems I only stumble upon the issue that the map is not displayed at all (e.g., layout is 0px/0px or the API key is missing). I also have a native Android application, and there die Activity with a Google Map is displayed quite fine.

Thanks for any hints!

Answer 1

Ok, after some more searching the Web, I’ve found the problem. It seems to be a common issue when you try to load a map in a hidden DIV element. The trick is to simply refresh the map after this DIV becomes visible. One way I found and that worked for me is to mnually trigger the resize event: google.maps.event.trigger(map, "resize");