overlay googlemaps in dash plotly

1import json
2import dash
3import dash_html_components as html
4import dash_leaflet as dl
5from dash.dependencies import Output, Input
6
7MAP_ID = "map"
8MARKER_GROUP_ID = "marker-group"
9COORDINATE_CLICK_ID = "coordinate-click-id"
10
11# Create app.
12app = dash.Dash(__name__, external_scripts=['https://codepen.io/chriddyp/pen/bWLwgP.css'])
13app.layout = html.Div([
14    dl.Map(style={'width': '1000px', 'height': '500px'},
15           center=[-17.782769, -50.924872],
16           zoom=3,
17           children=[
18               dl.TileLayer(url="http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}"),
19               dl.LayerGroup(id=MARKER_GROUP_ID)
20           ], id=MAP_ID),
21    html.P("Coordinate (click on map):"),
22    html.Div(id=COORDINATE_CLICK_ID)]
23)
24
25
26@app.callback(Output(MARKER_GROUP_ID, 'children'), [Input(MAP_ID, 'click_lat_lng')])
27def set_marker(x):
28    if not x:
29        return None
30    return dl.Marker(position=x, children=[dl.Tooltip('Test')])
31
32
33@app.callback(Output(COORDINATE_CLICK_ID, 'children'), [Input(MAP_ID, 'click_lat_lng')])
34def click_coord(e):
35    if not e:
36        return "-"
37    return json.dumps(e)
38
39
40if __name__ == '__main__':
41    app.run_server(debug=False, port=8150)
42