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

Mon Apr 7 13:11:30 EDT 2014

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?

Cheers,
Tyler

Exception in Comm callback
 TypeError {stack: "TypeError: undefined is not a function↵ at
IPyt…ocalhost:8889/static/widgets/js/widget.js:340:17)", message: "undefined
is not a function"}
 TypeError: undefined is not a function at
IPython.DOMWidgetView.extend.initialize (eval at <anonymous> (
http://localhost:8889/static/notebook/js/outputarea.js?v=de72c2eeb2653a9b75ab7c6f84c451fb:549:18<http://localhost:8889/static/notebook/js/outputarea.js?v=de72c2eeb2653a9b75ab7c6f84c451fb>),
<anonymous>:21:28) at a.View (
http://localhost:8889/static/components/backbone/backbone-min.js?v=dd2e6c2643968f7932487454302f407d:1:12150<http://localhost:8889/static/components/backbone/backbone-min.js?v=dd2e6c2643968f7932487454302f407d>)
at r (
http://localhost:8889/static/components/backbone/backbone-min.js?v=dd2e6c2643968f7932487454302f407d:1:19091<http://localhost:8889/static/components/backbone/backbone-min.js?v=dd2e6c2643968f7932487454302f407d>)
at r (
http://localhost:8889/static/components/backbone/backbone-min.js?v=dd2e6c2643968f7932487454302f407d:1:19091<http://localhost:8889/static/components/backbone/backbone-min.js?v=dd2e6c2643968f7932487454302f407d>)
at new r (
http://localhost:8889/static/components/backbone/backbone-min.js?v=dd2e6c2643968f7932487454302f407d:1:19091<http://localhost:8889/static/components/backbone/backbone-min.js?v=dd2e6c2643968f7932487454302f407d>)
at WidgetManager.create_view (
http://localhost:8889/static/widgets/js/manager.js:121:24<http://localhost:8889/static/widgets/js/manager.js>)
at Backbone.View.extend.create_child_view (
http://localhost:8889/static/widgets/js/widget.js:305:56<http://localhost:8889/static/widgets/js/widget.js>)
at IPython.DOMWidgetView.extend.add_child_model (
http://localhost:8889/static/widgets/js/widget_container.js:48:29<http://localhost:8889/static/widgets/js/widget_container.js>)
at x.isFunction.i (
http://localhost:8889/static/components/jquery/jquery.min.js?v=ccd0edd113b78697e04fb5c1b519a5cd:4:5488<http://localhost:8889/static/components/jquery/jquery.min.js?v=ccd0edd113b78697e04fb5c1b519a5cd>
)
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.python.org/pipermail/ipython-dev/attachments/20140407/9771e91e/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: GoogleMapWidget.ipynb
Type: application/octet-stream
Size: 4578 bytes
Desc: not available
URL: <http://mail.python.org/pipermail/ipython-dev/attachments/20140407/9771e91e/attachment.obj>