使用gmap与Bokeh在Jupyter Notebook显示Google Map的问题

我按照博客教程尝试在Jupyter Notebook中使用gmap和Bokeh显示带有坐标散点的Google Map，遇到以下两个问题：

方法1：执行代码后提示错误“请查看JavaScript控制台获取错误信息” #

执行下方代码后，页面提示错误“See JavaScript console for error”，该如何解决？

import gmaps
gmaps.configure(api_key='AIzaSyAyRAMSfG6ic9oYV9bemRkn2sYqOh8VQSE')
from bokeh.io import output_notebook
output_notebook()
#bokeh_width, bokeh_height = 500, 400
import os
api_key = 'AIzaSyAyRAMSfG6ic9oYV9bemRkn2sYqOh8VQSE'  # os.environ['AIzaSyAyRAMSfG6ic9oYV9bemRkn2sYqOh8VQSE']
from bokeh.io import show
from bokeh.plotting import gmap
from bokeh.models import GMapOptions

lat, lon = 46.2437, 6.0251

def plot(lat, lng, zoom=1, map_type='terrain'):
    gmap_options = GMapOptions(lat=lat, lng=lng, map_type=map_type, zoom=zoom)
    p = gmap(api_key, gmap_options, title='Google Map for Arctic Canada')     #,width=bokeh_width, height=bokeh_height)
    show(p)
    return p

方法2：JavaScript问题解决，但轴标签错误且谷歌地图未显示 #

执行下方代码后，JavaScript相关问题解决，但出现轴标签错误，且谷歌地图无法显示。

import gmaps
gmaps.configure(api_key='AIzaSyAyRAMSfG6ic9oYV9bemRkn2sYqOh8VQSE')
from bokeh.io import output_notebook
from bokeh.io import show
from bokeh.plotting import figure, gmap
from bokeh.models import GMapOptions

bokeh_width, bokeh_height =500,400
api_key = 'AIzaSyAyRAMSfG6ic9oYV9bemRkn2sYqOh8VQSE'  # os.environ['AIzaSyAyRAMSfG6ic9oYV9bemRkn2sYqOh8VQSE']
# %% 
output_notebook()
figure(height=300, width=600, x_range=(-100,-70), y_range=(50, 70))
def plot(lat, lng, zoom=10, map_type='roadmap'):
    gmap_options = GMapOptions(lat=lat, lng=lng,
                               map_type=map_type, zoom=zoom)
    p = gmap(api_key, gmap_options, title='Google Map',
             width=bokeh_width, height=bokeh_height)
    show(p)
    return p

p = plot(62, -80)

内容的提问来源于stack exchange，提问作者Tanmoy Das