V3 Map rendering as solid gray

[Tres Seaver]

After porting my app this morning from V2 to V3, I'm finding that the map is no longer rendering properly:  instead, all the tiles are solid gray.  To view the map:

- Visit http://tinybird.agendales.com/, and allow the app to use your location.

- Select "Find Nearby Birds", and pick a species.

- After the species observations are loaded. click the "Map" button at the bottom of the page.

Note that the "canvas" div for the map is initially light green, but then changes to solid gray when the map is constructed.

[Gregory Short]

That host is either down or inaccessible for some other reason:

http://www.downforeveryoneorjustme.com/http://tinybird.agendales.com/

-G

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

[Tres Seaver]

Thanks for checking -- teach me not to copy-and-paste from the browser:

  http://tinybird.agendaless.com/

[Gregory Short]

Maybe the third time will be the charm? ;)

http://www.downforeveryoneorjustme.com/http://tinybird.agendales.com/

-G

On Apr 1, 2011, at 12:30 PM, Tres Seaver wrote:

Thanks for checking -- teach me not to copy-and-paste from the browser:

  http://tinybird.agendaless.com/

[Gregory Short]

Doh, nevermind, that time, my OWN copy/paste was mixed up. Disregard! :)

-G

On Apr 1, 2011, at 12:30 PM, Tres Seaver wrote:

Thanks for checking -- teach me not to copy-and-paste from the browser:

  http://tinybird.agendaless.com/

[Gregory Short]

Did you check the error console? For instance, in Safari, I see the following:

TypeError: Result of expression 'device_location' [null] is not an object. /static/tinybird.js:281

[geoco...@gmail.com]

On Apr 1, 10:36 am, Gregory Short <gsho...@gmail.com> wrote:
> Did you check the error console? For instance, in Safari, I see the following:
>
> TypeError: Result of expression 'device_location' [null] is not an object. /static/tinybird.js:281

I get (FF 3.0.5):
Error: JSON is not defined
Source File: http://tinybird.agendaless.com/static/Lawnchair.js
Line: 9

Error: tinybird is undefined
Source File: http://tinybird.agendaless.com/
Line: 358

-- Larry

[Tres Seaver]

On 04/01/2011 01:36 PM, Gregory Short wrote:
> Did you check the error console? For instance, in Safari, I see the following:
>
> TypeError: Result of expression 'device_location' [null] is not an object. /static/tinybird.js:281

Did you allow the site to use your location before clicking "Find Nearby
Birds"? Anyway, I moved that assignment back inside the guard for
'device_location_ready'.

Tres.
--
===================================================================
Tres Seaver +1 540-429-0999 tse...@palladion.com
Palladion Software "Excellence by Design" http://palladion.com

[Gregory Short]

Additionally, in FF4 (mac), an error pops up saying that the device location couldn't be determined.

-G

[Tres Seaver]

Thanks for checking. I'm targetting Android, and so testing mostly with
Chromium. It does render for me with FF 4.0 (still showing the gray map).

[Gregory Short]

I did, both in Safari and in FF4. Could be that for whatever reason, my location is simply unavailable. Are you checking for the case where it's not? :)

-G

[geoco...@gmail.com]

On Apr 1, 11:12 am, Tres Seaver <tres.sea...@gmail.com> wrote:

> On 04/01/2011 01:58 PM, geocode...@gmail.com wrote:
>
> > On Apr 1, 10:36 am, Gregory Short <gsho...@gmail.com> wrote:
> >> Did you check the error console? For instance, in Safari, I see the following:
>
> >> TypeError: Result of expression 'device_location' [null] is not an object. /static/tinybird.js:281
>
> > I get (FF 3.0.5):
> > Error: JSON is not defined
> > Source File:http://tinybird.agendaless.com/static/Lawnchair.js
> > Line: 9
>
> > Error: tinybird is undefined
> > Source File:http://tinybird.agendaless.com/
> > Line: 358
>
> Thanks for checking.  I'm targetting Android, and so testing mostly with
> Chromium.  It does render for me with FF 4.0 (still showing the gray map).

I don't see any map, just a "green" box (I assume it is this color:
background-color: #CCFFCC;

Are you waiting for the page onload event before initializing the map?

-- Larry

>
> Tres.
> --
> ===================================================================
> Tres Seaver          +1 540-429-0999          tsea...@palladion.com

[Tres Seaver]

On 04/01/2011 02:23 PM, Gregory Short wrote:
> I did, both in Safari and in FF4. Could be that for whatever reason,
> my location is simply unavailable. Are you checking for the case
> where it's not? :)

The alert you are seeing is a placeholder inside the "failure" callback
for 'navigoator.geolocation.getCurrentLocation'. Unfortunately, the
part of the app that allows setting the location manually is still under
development.

[Tres Seaver]

On Apr 1, 2:37 pm, Tres Seaver <tres.sea...@gmail.com> wrote:
> On 04/01/2011 02:23 PM, Gregory Short wrote:
>
> > I did, both in Safari and in FF4. Could be that for whatever reason,
> > my location is simply unavailable. Are you checking for the case
> > where it's not? :)
>
> The alert you are seeing is a placeholder inside the "failure" callback
> for 'navigoator.geolocation.getCurrentLocation'.  Unfortunately, the
> part of the app that allows setting the location manually is still under
> development.

I have pushed out a version of the page which defaults the location in
the case where it cannot be found (the alert box you saw).

Tres.

[Tres Seaver]

On Apr 1, 2:28 pm, "geocode...@gmail.com" <geocode...@gmail.com>
wrote:

> I don't see any map, just a "green" box (I assume it is this color:
> background-color: #CCFFCC;

I've seen the green stick around on FF4, and then shift to grey when I
obscure part of the window.

> Are you waiting for the page onload event before initializing the map

Hmm, I'm initializing the map only when the div containing it is being
shown for the first time, which should be well after document.onload.


Tres.

[geoco...@gmail.com]

I thought I had seen threads that implied the .ready event happens
before the document.onload event (but I don't use it). I also thought
that the end result of those threads was running the map
initialization in the document.onload event solved the problems.

-- Larry


>
> Tres.

[Tres Seaver]

On 04/01/2011 04:04 PM, geoco...@gmail.com wrote:

> I thought I had seen threads that implied the .ready event happens
> before the document.onload event (but I don't use it). I also thought
> that the end result of those threads was running the map
> initialization in the document.onload event solved the problems.

Thanks! I'm not sure whether '$(document).ready()' fires before or
after 'document.onload()': it shouldn't matter for my app, as the only
thing I do inside '$(document).ready()' is bind the JS API functions to
the corresponding 'pageload' events. The UI model here is based on one
big HTML page with a top-level div per "viewable section": the event
which triggers it is showing the "page" div which contains the map
canvas div.

I've stepped through the code in the Chromium and Firefox browsers -- it
is definitely running long after the page has done loading. The canvas
node is present, and stays light green until after the map code
scribbles on it, at which point it turns gray. In the DOM inspector,
the element has leaf-level style changing its color, which overrides the
CSS rule set at document scope: I assume that means that the Google API
code has mutated it directly.

Tres.
--
===================================================================
Tres Seaver +1 540-429-0999 tse...@palladion.com

[Tres Seaver]

I have updated the http://tinybird.agendaless.com/ site such that the map div is shown on initial load.  For me, both Chromium 0.10 and FF 4.0 briefly show the light green background, and then immediately replace it with the gray overlay (from divs added by the map code).  Neither browser shows anything in the javascript console, except that the following resource shows a warning under Chromium ("Resource interpreted as image but transferred with MIME type text/html"), and loads with no payload in either browser.

 http://gg.google.com/csi?v=2&s=mapsapi3&action=geocoder&rt=gsc.146

(the value for the 'rt' paramter under Chromium is 'gsc.107').


Tres.

[Tres Seaver]

(SOLVED)  It turns out that the 'zoom' option is no longer defaulted to a reasonable value under V3.  Setting it explicitly gets the map to render.

Thanks Greg and Larry for your attempts to help!


Tres.