<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><div><br></div><div>-A</div></div><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 class="HOEnZb"><font color="#888888">
      <br>
      -Raymond</font></span><div><div class="h5"><br>
      <br>
      On 4/7/14 10:11 AM, Tyler Erickson wrote:<br>
    </div></div></div>
    <blockquote type="cite"><div><div class="h5">
      <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 class=""><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">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>