<div dir="ltr">Yes, I am specifically interested in using the IPython widgets, so that I update python variables based on the interactions with the map.</div><div class="gmail_extra"><br><br><div class="gmail_quote">On Mon, Apr 7, 2014 at 10:27 AM, Aron Ahmadia <span dir="ltr"><<a href="mailto:aron@ahmadia.net" target="_blank">aron@ahmadia.net</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr">Raymond, <div><br></div><div>Cool example! I think Tyler is asking for a way to integrate Google Maps as an IPython Widget. </div>
<span class="HOEnZb"><font color="#888888"><div><br></div><div>-A</div></font></span></div><div class="HOEnZb"><div class="h5"><div class="gmail_extra"><br><br><div class="gmail_quote">
On Mon, Apr 7, 2014 at 1:24 PM, Raymond Yee <span dir="ltr"><<a href="mailto:raymond.yee@gmail.com" target="_blank">raymond.yee@gmail.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<div bgcolor="#FFFFFF" text="#000000">
<div>Hi Tyler,<br>
<br>
Take a look at
<a href="http://nbviewer.ipython.org/github/rdhyee/working-open-data-2014/blob/master/notebooks/Day_07_C_Google_Map_API.ipynb" target="_blank">http://nbviewer.ipython.org/github/rdhyee/working-open-data-2014/blob/master/notebooks/Day_07_C_Google_Map_API.ipynb</a>
<br><span><font color="#888888">
<br>
-Raymond</font></span><div><div><br>
<br>
On 4/7/14 10:11 AM, Tyler Erickson wrote:<br>
</div></div></div>
<blockquote type="cite"><div><div>
<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" target="_blank">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" target="_blank">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>Exception
in Comm callback</span><span> </span><span>
<div style="margin:0px 0px 0px 12px!important">
<div style="padding:0px 8px 0px 0px;min-height:0px;white-space:nowrap;background-image:none;border:none">
<div style="word-wrap:break-word;white-space:normal;line-height:13px"><span style="font-style:italic">TypeError {<span style="color:rgb(136,19,145)">stack</span>: <span style="color:rgb(196,26,22);white-space:pre-wrap">"TypeError:
undefined is not a function↵ at
IPyt…ocalhost:8889/static/widgets/js/widget.js:340:17)"</span>, <span style="color:rgb(136,19,145)">message</span>: <span style="color:rgb(196,26,22);white-space:pre-wrap">"undefined
is not a function"</span>}</span></div>
</div>
</div>
</span><span> </span><span>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" title="http://localhost:8889/static/notebook/js/outputarea.js?v=de72c2eeb2653a9b75ab7c6f84c451fb" target="_blank">http://localhost:8889/static/notebook/js/outputarea.js?v=de72c2eeb2653a9b75ab7c6f84c451fb:549:18</a><span>),
<anonymous>:21:28) at a.View (</span><a href="http://localhost:8889/static/components/backbone/backbone-min.js?v=dd2e6c2643968f7932487454302f407d" title="http://localhost:8889/static/components/backbone/backbone-min.js?v=dd2e6c2643968f7932487454302f407d" target="_blank">http://localhost:8889/static/components/backbone/backbone-min.js?v=dd2e6c2643968f7932487454302f407d:1:12150</a><span>) at r
(</span><a href="http://localhost:8889/static/components/backbone/backbone-min.js?v=dd2e6c2643968f7932487454302f407d" title="http://localhost:8889/static/components/backbone/backbone-min.js?v=dd2e6c2643968f7932487454302f407d" target="_blank">http://localhost:8889/static/components/backbone/backbone-min.js?v=dd2e6c2643968f7932487454302f407d:1:19091</a><span>) at r
(</span><a href="http://localhost:8889/static/components/backbone/backbone-min.js?v=dd2e6c2643968f7932487454302f407d" title="http://localhost:8889/static/components/backbone/backbone-min.js?v=dd2e6c2643968f7932487454302f407d" target="_blank">http://localhost:8889/static/components/backbone/backbone-min.js?v=dd2e6c2643968f7932487454302f407d:1:19091</a><span>) at
new r (</span><a href="http://localhost:8889/static/components/backbone/backbone-min.js?v=dd2e6c2643968f7932487454302f407d" title="http://localhost:8889/static/components/backbone/backbone-min.js?v=dd2e6c2643968f7932487454302f407d" target="_blank">http://localhost:8889/static/components/backbone/backbone-min.js?v=dd2e6c2643968f7932487454302f407d:1:19091</a><span>) at
WidgetManager.create_view (</span><a href="http://localhost:8889/static/widgets/js/manager.js" title="http://localhost:8889/static/widgets/js/manager.js" target="_blank">http://localhost:8889/static/widgets/js/manager.js:121:24</a><span>) at
Backbone.View.extend.create_child_view (</span><a href="http://localhost:8889/static/widgets/js/widget.js" title="http://localhost:8889/static/widgets/js/widget.js" target="_blank">http://localhost:8889/static/widgets/js/widget.js:305:56</a><span>) at
IPython.DOMWidgetView.extend.add_child_model (</span><a href="http://localhost:8889/static/widgets/js/widget_container.js" title="http://localhost:8889/static/widgets/js/widget_container.js" target="_blank">http://localhost:8889/static/widgets/js/widget_container.js:48:29</a><span>) at
x.isFunction.i (</span><a href="http://localhost:8889/static/components/jquery/jquery.min.js?v=ccd0edd113b78697e04fb5c1b519a5cd" title="http://localhost:8889/static/components/jquery/jquery.min.js?v=ccd0edd113b78697e04fb5c1b519a5cd" target="_blank">http://localhost:8889/static/components/jquery/jquery.min.js?v=ccd0edd113b78697e04fb5c1b519a5cd:4:5488</a><span>)</span><br>
</div>
</div>
<br>
<fieldset></fieldset>
<br>
</div></div><div><pre>_______________________________________________
IPython-dev mailing list
<a href="mailto:IPython-dev@scipy.org" target="_blank">IPython-dev@scipy.org</a>
<a href="http://mail.scipy.org/mailman/listinfo/ipython-dev" target="_blank">http://mail.scipy.org/mailman/listinfo/ipython-dev</a>
</pre>
</div></blockquote>
<br>
</div>
<br>_______________________________________________<br>
IPython-dev mailing list<br>
<a href="mailto:IPython-dev@scipy.org" target="_blank">IPython-dev@scipy.org</a><br>
<a href="http://mail.scipy.org/mailman/listinfo/ipython-dev" target="_blank">http://mail.scipy.org/mailman/listinfo/ipython-dev</a><br>
<br></blockquote></div><br></div>
</div></div><br>_______________________________________________<br>
IPython-dev mailing list<br>
<a href="mailto:IPython-dev@scipy.org">IPython-dev@scipy.org</a><br>
<a href="http://mail.scipy.org/mailman/listinfo/ipython-dev" target="_blank">http://mail.scipy.org/mailman/listinfo/ipython-dev</a><br>
<br></blockquote></div><br></div>