Display / Render an HTML file inside Jupyter Notebook on Google Colab platform

Question

I am using Google Colab to work create maps with Python 3.0 and I have done so using Basemaps. I am next trying to create similar maps using Google Maps. There are two python packages that I have located namely gmaps and gmplot. It seems as if gmaps requires a google API but gmplot does not hence I am using gmplot.

With gmplot, I am able to create a file 'my_map.html' which if I download to my local desktop, I can open in a browser and see the map correctly.

However I would like to see the map in the notebook output cell without downloading to the local machine. The following image is a screenshot of what I have tried ... there is no error, but no display either.

is there some command like %matplotlib inline that i need execute to be able to display the contents of the file in the output cell? or is there a better solution

Solution 1

Try full path to your file: /content/my_map.html

The code should be:

import IPython
IPython.display.HTML(filename='/path/to/your/filename')

Solution 2

Please Try Following code:

from IPython.display import IFrame
IFrame(src='path/to/your/filename.html', width=900, height=600)

It did work for me. :)

Solution 3

This solution is not working for me if the html contains images located on colab or in your (mapped) google-drive:

IPython.display.HTML('<img src="/content/elmo_1.jpg">') # can't find image 
IPython.display.HTML('<img src="/content/gdrive/My Drive/elmo_1.jpg">') # can't find image  
IPython.display.HTML('<img src="/content/gdrive/My%20Drive/elmo_1.jpg">') # can't find image  

It works, however, with standard url:

IPython.display.HTML('<img src="https://github.com/blablabla/elmo_1.jpg?raw=1">')