Displaying GMaps as HTML on Jupyter

quang....@gmail.com

unread,

Aug 21, 2016, 5:52:08 PM8/21/16

to Project Jupyter

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>

<title>Simple Polygon</title>

<style>

html, body {

height: 60px !important;

margin: 0;

padding: 0;

}

#map {

height: 100%;

}

</style>

</head>

<body>

// 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?

Screenshot from 2016-08-21 17:06:21.png

Sylvain Corlay

unread,

Aug 21, 2016, 6:12:11 PM8/21/16

to jup...@googlegroups.com

Hi,

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

Cheers,

Sylvain

--
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 jupyter+unsubscribe@googlegroups.com.
To post to this group, send email to jup...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jupyter/cf107eca-7103-42d7-9615-7a33980ab34c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Hai Nguyen

unread,

Aug 21, 2016, 8:39:48 PM8/21/16

to jup...@googlegroups.com

You can also try IFrame: http://stackoverflow.com/questions/29287219/embedding-a-tweet-in-ipython-notebook-given-status-id