Hi,

To play with interactive maps (but not gmaps), check out the ipyleaflet
project.

Cheers,

Sylvain

On Sun, Aug 21, 2016 at 11:52 PM, <[email protected]> wrote:

> I am having some trouble with displaying the HTML of GMaps on Jupyter.
> Here is what I have in the cell:
>
>     from IPython.core.display import display, HTML
>
>     f = open('camb-gmaps.html', 'r')
>     maps_html = f.read()
>     HTML(maps_html)
>
> And my file `camb-gmaps.html' is as (I have hidden my API):
>
>     <!DOCTYPE html>
>     <html>
>       <head>
>         <meta name="viewport" content="initial-scale=1.0,
> user-scalable=no">
>         <meta charset="utf-8">
>         <title>Simple Polygon</title>
>         <style>
>           html, body {
>             height: 60px !important;
>             margin: 0;
>             padding: 0;
>           }
>           #map {
>             height: 100%;
>           }
>         </style>
>       </head>
>       <body>
>         <div id="map"></div>
>         <script>
>
>           // This example creates a simple polygon representing the
> Bermuda Triangle.
>
>           function initMap() {
>             var map = new google.maps.Map(document.getElementById('map'),
> {
>               zoom: 12,
>               center: {lat: 52.2053, lng: 0.1218},
>               mapTypeId: 'terrain'
>             });
>
>             // Define the LatLng coordinates for the polygon's path.
>             var polyCoords = [
>               {lat: 52.213444, lng: 0.120672},
>               {lat: 52.213234, lng: 0.079817},
>               {lat: 52.192929, lng: 0.087027},
>               {lat: 52.185773, lng: 0.125822},
>               {lat: 52.192613, lng: 0.153288},
>               {lat: 52.212708, lng: 0.145563},
>             ];
>
>             // Construct the polygon.
>             var cambRegion = new google.maps.Polygon({
>               paths: polyCoords,
>               strokeColor: '#FF0000',
>               strokeOpacity: 0.8,
>               strokeWeight: 2,
>               fillColor: '#FF0000',
>               fillOpacity: 0.35
>             });
>             cambRegion.setMap(map);
>           }
>         </script>
>         <script async defer
>         src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY
> &callback=initMap">
>         </script>
>       </body>
>     </html>
>
> However, this is the result:
>
>
>
> I have tried changing the height in the CSS rule, like making it `height:
> 500px !important` but it does not affect the result and remain a thin line
> like that.
>
> Any helps, please?
>
> --
> You received this message because you are subscribed to the Google Groups
> "Project Jupyter" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected].
> To post to this group, send email to [email protected].
> To view this discussion on the web visit https://groups.google.com/d/
> msgid/jupyter/cf107eca-7103-42d7-9615-7a33980ab34c%40googlegroups.com
> <https://groups.google.com/d/msgid/jupyter/cf107eca-7103-42d7-9615-7a33980ab34c%40googlegroups.com?utm_medium=email&utm_source=footer>
> .
> For more options, visit https://groups.google.com/d/optout.
>

-- 
You received this message because you are subscribed to the Google Groups 
"Project Jupyter" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit 
https://groups.google.com/d/msgid/jupyter/CAK%3DPhk7KvoBP5-cApUi5w5hrwNmkyHGCm0__uFCZNy-%3DN89dfA%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.

Reply via email to