Javascript API v3 works fine on desktop browser, not at all on Android browser

[martypantsROK]

I wrote a simple GoogleMaps Javascript API v3 webpage that displays a
series of places of interest within the city I live in.
You can see the web page here :

http://www.ulsanonline.com/Maps/ulsanplacemap.html

I parse a XML file of placenames and lat/longs and and then put a few
custom markers on a map. No big deal. It works fine on
my windows browsers, whether I use Chrome, Firefox or IE.

However, when I access the same page from my Android phone, the map is
completely blank. Doesn't matter whether I use the
default Android browser, Firefox or Opera.
I've plugged the phone into Eclipse so I can view Logcat and get some
idea what's going on. Logcat gives me some info that it's seeing
googlemaps codes, as I get these :

01-01 10:09:33.976: I/ActivityThread(2119): Pub
com.google.android.maps.TrafficAppWidgetProvider:
com.google.googlenav.appwidget.traffic.TrafficAppWidgetProvider
01-01 10:09:34.500: I/ActivityThread(2119): Pub
com.google.android.maps.NavigationAvailabilityProvider:
com.google.googlenav.provider.NavigationAvailabilityProvider
01-01 10:09:34.496: I/ActivityThread(2119): Pub
com.google.android.maps.LocalSuggestionProvider:
com.google.googlenav.provider.LocalSuggestionProvider

but Logcat shows no errors and my phone shows no map. On Android,
Firefox and the default browser sometimes throw errors on the AdSense
ad on the right side of the page, but they both still show the ad and
no map. Doesn't matter if the ads are there or not as the map still
doesn't display

Any ideas what might I be doing wrong that Android browsers can't seem
to show a map?

[Marcelo]

On the phone, your map does not have a height.
You're setting the height in percentage, but the browser needs to know
*percentage of what*, and the parent node to the map_canvas does not
have a height.

This part:
if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') !
= -1 ) {
mapdiv.style.width = '100%';
mapdiv.style.height = '100%';
} else {
mapdiv.style.width = '600px';
mapdiv.style.height = '800px';
}
}

sets the height correctly, but only if the user agent is not a phone.

So, it is not the API that doesn't work in a phone but your CSS.

--
Marcelo - http://maps.forum.nu
--

[martypantsROK]

That was it! Thanks - nice catch!

Marty

On Jan 1, 10:50 pm, Marcelo <marcelo...@hotmail.com> wrote:
> On the phone, your map does not have a height.
> You're setting the height in percentage, but the browser needs to know
> *percentage of what*, and the parent node to the map_canvas does not
> have a height.
>
> This part:
> if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') !
> = -1 ) {
>     mapdiv.style.width = '100%';
>     mapdiv.style.height = '100%';
>   } else {
>     mapdiv.style.width = '600px';
>     mapdiv.style.height = '800px';
>   }
>
> }
>
> sets the height correctly, but only if the user agent is not a phone.
>
> So, it is not the API that doesn't work in a phone but your CSS.
>
> --

> Marcelo -http://maps.forum.nu