Google JSAPI & JSFiddle: relationship problems? Just a little miscommunication.

Posted on Feb 8, 2011 in App Dev, News, Quirks

jsFiddle

UPDATE 02/08/2011:

  • It looks like this was caused by an issue of the order of the libraries. See the comments below. Looks like it’s just an issue with the loading of the libraries through jsFiddle. Also, for more info checkout the jsFiddle Google Group.

  • Be certain to use the Google JSAPI with the “fake=.js” url parameter (i.e., http://www.google.com/jsapi?fake=.js) to make certain the library loads.

  • Thanks to the developer, Piotr Zalewa, for a quick response.

I’ve come to love jsFiddle. Although I heard about it some time ago I never really got around to doing anything with it until rather recently I joined an online community jQuery course with P2P. (Interesting concept and definitely worth taking a look at.) So in doing so for a recent exercise I decided to use the Google Maps JS API for generating a map with markers for people retrieved form a JSON object. The problem I’m noticing is that the Google APIs don’t seem to work fluidly with jsFiddle.

First the “google” object could not be found when running the page. So, although it’s not ideal, I added it to the html section and the libraries loaded. But now I’m getting an error with the visualization object not being found. I think it’s an issue with jsFiddle at this time, as I’ve actually just copy/pasted the example from the Google Visualization library and it still doesn’t work. I’m putting some feelers out to find out if there really is something going on or if I’m just going crazy in the process.

One last note, too: I highly suggest not using Chrome with jsFiddle, either. On two occasions Chrome just stopped interacting with the UI and I lost all my changes. Especially ugh since there’s not an autosave at this time.

No related posts.

  • http://twitter.com/zalun Piotr Zalewa

    Please read the documentation at http://doc.jsfiddle.net/ especially about the wrappers and resources. You’ve made 2 mistakes:

    1. Google API wasn’t loaded (in Resources tab)
    2. You’ve chosen the onLoad code wrapper which will fail in this case

    http://jsfiddle.net/zalun/YeWjy/2/

  • http://twitter.com/zalun Piotr Zalewa

    And BTW – I use Chrome without these issues – would you share these concerns with the devs on the channels provided? also on the docs site.

    Thanks

  • sproket

    @Piotr: What does the fake parameter do on the managed resource?

    http://www.google.com/jsapi?fake=.js

    It doesn’t work if you leave it off and I suspect it has something to do distinguishing between css and js resources for the benefit of jsFiddle (Google does not need this parameter?).

  • http://www.imarichardson.com Saeed Richardson

    @Piotr: Thanks for the reply back, Piotr. I’m really amazed at your quick response to the post! I actually had the resource included first, but took it out as I was testing/playing around.

    I’d looked through the docs but had not quite found what appeared to be a solution. In looking at your example I noticed you weren’t loading any libraries but were running the values from the head. I guess I should in this case load jQuery from Google’s CDN instead of the included version with jsFiddle.

    Also, I just noticed the GitHub Issues and Google Group. May I suggest adding a link to the Google Group and blog under the “Documentation” link on the jsFiddle left sidebar. I found myself wanting to find go somewhere to find more info last night and in the midst of it all just missed those two links whenever I clicked on the docs. I was pretty much just going to the docs site and immediately typing search terms then reading without really focusing on the first page. (Yea, my fault here.) Having the links there might help ambitious, late night developers who don’t read – like myself – go quickly to get input. I’ll also check and see if I can add this to the issue list.

    I’ll also check out the IRC node, too.

    Thanks for a great product and quick response.

  • http://twitter.com/zalun Piotr Zalewa

    the external resources do recognize the type of the script (css/js) on the “extension” so the last characters do have to be .js – there is a plan to make js default.

  • http://twitter.com/zalun Piotr Zalewa

    your example doesn’t need any frameworks except of the Google API library. hence no need for them, the code may be placed in body if you wish.

  • http://www.imarichardson.com/2011/02/09/jquery-p2pu-exercise-2-with-google-maps/ jQuery P2PU Exercise 2 with Google Maps | imarichardson.com

    [...] my output from the exercise iterating through the array and ultimately loading the map. Yesterday’s post brought to the surface a couple of nuances in dealing with jsFiddle, so in getting things running [...]