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.
For more options, visit https://groups.google.com/d/optout.
