[IPython-dev] working towards an interactive Google Maps widget

Mon Apr 7 16:33:19 EDT 2014

On 4/7/14, 12:11, Tyler Erickson wrote:
> I have been attempting to create an interactive Google Map widget,
> following the directions on the custom widgets
> <http://nbviewer.ipython.org/github/ipython/ipython/blob/2.x/examples/Interactive%20Widgets/Custom%20Widgets.ipynb>
> notebook. My end goal is to create a widget that passes back location
> (lat, lon) based on a user's input, but for now I would be happy just
> get the map to appear in a notebook.
>
> For a simple HTML page page, an interactive Google Map is typically
> added by
> <https://developers.google.com/maps/documentation/javascript/examples/map-simple>:
>
>   * referencing a javascript library in a <html><head><script> element
>   * adding a <html><body><div> element as a container
>   * adding an javascript initialize() function, and adding a DOM
>     listener event so that it the initialization happens during the page
>     load.
>
> I am not clear on how to do the equivalent in an IPython notebook /
> require.js / backbone.js. My current attempt (see attached ipynb file)
> results in a Comm exception (listed below).
>
> My guess on what is going wrong is that I am not correctly referencing
> the external Maps API JS library, and as a result google.maps.Map() is
> undefined. Ideally I would like the google.maps object to be available
> for all cells in the notebook, because I think it will be common to
> display multiple maps in a notebook.
>
> Any ideas how do debug this?

I haven't looked at your code, but I remember that debugging Comm-based 
widgets seems more difficult than it needs to be because the Comm 
swallows all errors (and tries to print them, but I don't have much luck 
trying to find the actual error from its printout).  It would be nice if 
there was a debug level somewhere that would let the javascript comm 
objects just propagate their errors.

What I've done to debug widgets and comm-based things is to set a 
breakpoint in the code using Chrome Developer tools, and then step 
through the code, or turn on the "pause on all exceptions" in Chrome 
(https://developers.google.com/chrome-developer-tools/docs/javascript-debugging#pause-on-exceptions). 
  Then the javascript error triggers a break, and I can play with things 
in the console, inspect variables, etc.

By the way, I think this map thing is a cool idea.

Jason