<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="Content-Type">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div class="moz-cite-prefix">Hi Tyler,<br>
<br>
Take a look at
<a class="moz-txt-link-freetext" href="http://nbviewer.ipython.org/github/rdhyee/working-open-data-2014/blob/master/notebooks/Day_07_C_Google_Map_API.ipynb">http://nbviewer.ipython.org/github/rdhyee/working-open-data-2014/blob/master/notebooks/Day_07_C_Google_Map_API.ipynb</a>
<br>
<br>
-Raymond<br>
<br>
On 4/7/14 10:11 AM, Tyler Erickson wrote:<br>
</div>
<blockquote
cite="mid:CAKAkUohf0tEGnvGLanrFt6f41onGFg4sC671aZ5XCNsx3V=nRQ@mail.gmail.com"
type="cite">
<div dir="ltr">
<div>I have been attempting to create an interactive Google Map
widget, following the directions on the <a
moz-do-not-send="true"
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 moz-do-not-send="true"
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="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 moz-do-not-send="true"
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
moz-do-not-send="true"
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 moz-do-not-send="true"
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 moz-do-not-send="true"
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 moz-do-not-send="true"
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 moz-do-not-send="true"
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
moz-do-not-send="true"
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
moz-do-not-send="true"
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 moz-do-not-send="true"
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>
<br>
<fieldset class="mimeAttachmentHeader"></fieldset>
<br>
<pre wrap="">_______________________________________________
IPython-dev mailing list
<a class="moz-txt-link-abbreviated" href="mailto:IPython-dev@scipy.org">IPython-dev@scipy.org</a>
<a class="moz-txt-link-freetext" href="http://mail.scipy.org/mailman/listinfo/ipython-dev">http://mail.scipy.org/mailman/listinfo/ipython-dev</a>
</pre>
</blockquote>
<br>
</body>
</html>