<div dir="ltr"><div>I have been attempting to create an interactive Google Map widget, following the directions on the <a href="http://nbviewer.ipython.org/github/ipython/ipython/blob/2.x/examples/Interactive%20Widgets/Custom%20Widgets.ipynb">custom widgets</a> 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.<br>
</div><div><br></div><div>For a simple HTML page page, an <a href="https://developers.google.com/maps/documentation/javascript/examples/map-simple">interactive Google Map is typically added by</a>:</div><div><ul><li>referencing a javascript library in a <html><head><script> element<br>
</li><li>adding a <html><body><div> element as a container</li><li>adding an javascript initialize() function, and adding a DOM listener event so that it the initialization happens during the page load.</li>
</ul><div>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).</div><div><br></div><div>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.</div>
</div><div><br></div><div>Any ideas how do debug this?</div><div><br></div><div>Cheers,</div><div>Tyler</div><div><br></div><div><br></div><div><span style="color:rgb(48,57,66);font-family:'dejavu sans mono',monospace;font-size:11px;white-space:pre-wrap">Exception in Comm callback</span><span style="color:rgb(48,57,66);font-family:'dejavu sans mono',monospace;font-size:11px;white-space:pre-wrap"> </span><span class="" style="display:inline-block;vertical-align:top;font-family:'dejavu sans mono',monospace;white-space:pre-wrap;font-size:11px"><div class="" style="margin:0px 0px 0px 12px!important">
<div class="" style="padding:0px 8px 0px 0px;min-height:0px;white-space:nowrap;background-image:none;border:none"><div class="" style="float:right;margin-left:5px;max-width:55%;text-overflow:ellipsis;overflow:hidden"></div>
<div class="" style="word-wrap:break-word;white-space:normal;line-height:13px"><span class="" style="font-style:italic">TypeError {<span class="" style="color:rgb(136,19,145)">stack</span>: <span class="" style="color:rgb(196,26,22);white-space:pre">"TypeError: undefined is not a function↵ at IPyt…ocalhost:8889/static/widgets/js/widget.js:340:17)"</span>, <span class="" style="color:rgb(136,19,145)">message</span>: <span class="" style="color:rgb(196,26,22);white-space:pre">"undefined is not a function"</span>}</span></div>
</div></div></span><span style="color:rgb(48,57,66);font-family:'dejavu sans mono',monospace;font-size:11px;white-space:pre-wrap"> </span><span style="color:rgb(48,57,66);font-family:'dejavu sans mono',monospace;font-size:11px;white-space:pre-wrap">TypeError: undefined is not a function
at IPython.DOMWidgetView.extend.initialize (eval at <anonymous> (</span><a href="http://localhost:8889/static/notebook/js/outputarea.js?v=de72c2eeb2653a9b75ab7c6f84c451fb" class="" title="http://localhost:8889/static/notebook/js/outputarea.js?v=de72c2eeb2653a9b75ab7c6f84c451fb" style="color:rgb(84,84,84);font-family:'dejavu sans mono',monospace;font-size:11px;white-space:pre-wrap">http://localhost:8889/static/notebook/js/outputarea.js?v=de72c2eeb2653a9b75ab7c6f84c451fb:549:18</a><span style="color:rgb(48,57,66);font-family:'dejavu sans mono',monospace;font-size:11px;white-space:pre-wrap">), <anonymous>:21:28)
at a.View (</span><a href="http://localhost:8889/static/components/backbone/backbone-min.js?v=dd2e6c2643968f7932487454302f407d" class="" title="http://localhost:8889/static/components/backbone/backbone-min.js?v=dd2e6c2643968f7932487454302f407d" style="color:rgb(84,84,84);font-family:'dejavu sans mono',monospace;font-size:11px;white-space:pre-wrap">http://localhost:8889/static/components/backbone/backbone-min.js?v=dd2e6c2643968f7932487454302f407d:1:12150</a><span style="color:rgb(48,57,66);font-family:'dejavu sans mono',monospace;font-size:11px;white-space:pre-wrap">)
at r (</span><a href="http://localhost:8889/static/components/backbone/backbone-min.js?v=dd2e6c2643968f7932487454302f407d" class="" title="http://localhost:8889/static/components/backbone/backbone-min.js?v=dd2e6c2643968f7932487454302f407d" style="color:rgb(84,84,84);font-family:'dejavu sans mono',monospace;font-size:11px;white-space:pre-wrap">http://localhost:8889/static/components/backbone/backbone-min.js?v=dd2e6c2643968f7932487454302f407d:1:19091</a><span style="color:rgb(48,57,66);font-family:'dejavu sans mono',monospace;font-size:11px;white-space:pre-wrap">)
at r (</span><a href="http://localhost:8889/static/components/backbone/backbone-min.js?v=dd2e6c2643968f7932487454302f407d" class="" title="http://localhost:8889/static/components/backbone/backbone-min.js?v=dd2e6c2643968f7932487454302f407d" style="color:rgb(84,84,84);font-family:'dejavu sans mono',monospace;font-size:11px;white-space:pre-wrap">http://localhost:8889/static/components/backbone/backbone-min.js?v=dd2e6c2643968f7932487454302f407d:1:19091</a><span style="color:rgb(48,57,66);font-family:'dejavu sans mono',monospace;font-size:11px;white-space:pre-wrap">)
at new r (</span><a href="http://localhost:8889/static/components/backbone/backbone-min.js?v=dd2e6c2643968f7932487454302f407d" class="" title="http://localhost:8889/static/components/backbone/backbone-min.js?v=dd2e6c2643968f7932487454302f407d" style="color:rgb(84,84,84);font-family:'dejavu sans mono',monospace;font-size:11px;white-space:pre-wrap">http://localhost:8889/static/components/backbone/backbone-min.js?v=dd2e6c2643968f7932487454302f407d:1:19091</a><span style="color:rgb(48,57,66);font-family:'dejavu sans mono',monospace;font-size:11px;white-space:pre-wrap">)
at WidgetManager.create_view (</span><a href="http://localhost:8889/static/widgets/js/manager.js" class="" title="http://localhost:8889/static/widgets/js/manager.js" style="color:rgb(84,84,84);font-family:'dejavu sans mono',monospace;font-size:11px;white-space:pre-wrap">http://localhost:8889/static/widgets/js/manager.js:121:24</a><span style="color:rgb(48,57,66);font-family:'dejavu sans mono',monospace;font-size:11px;white-space:pre-wrap">)
at Backbone.View.extend.create_child_view (</span><a href="http://localhost:8889/static/widgets/js/widget.js" class="" title="http://localhost:8889/static/widgets/js/widget.js" style="color:rgb(84,84,84);font-family:'dejavu sans mono',monospace;font-size:11px;white-space:pre-wrap">http://localhost:8889/static/widgets/js/widget.js:305:56</a><span style="color:rgb(48,57,66);font-family:'dejavu sans mono',monospace;font-size:11px;white-space:pre-wrap">)
at IPython.DOMWidgetView.extend.add_child_model (</span><a href="http://localhost:8889/static/widgets/js/widget_container.js" class="" title="http://localhost:8889/static/widgets/js/widget_container.js" style="color:rgb(84,84,84);font-family:'dejavu sans mono',monospace;font-size:11px;white-space:pre-wrap">http://localhost:8889/static/widgets/js/widget_container.js:48:29</a><span style="color:rgb(48,57,66);font-family:'dejavu sans mono',monospace;font-size:11px;white-space:pre-wrap">)
at x.isFunction.i (</span><a href="http://localhost:8889/static/components/jquery/jquery.min.js?v=ccd0edd113b78697e04fb5c1b519a5cd" class="" title="http://localhost:8889/static/components/jquery/jquery.min.js?v=ccd0edd113b78697e04fb5c1b519a5cd" style="color:rgb(84,84,84);font-family:'dejavu sans mono',monospace;font-size:11px;white-space:pre-wrap">http://localhost:8889/static/components/jquery/jquery.min.js?v=ccd0edd113b78697e04fb5c1b519a5cd:4:5488</a><span style="color:rgb(48,57,66);font-family:'dejavu sans mono',monospace;font-size:11px;white-space:pre-wrap">)</span><br>
</div></div>