How to integrate Google Maps Address Autocompletion in Dash?

Dash Python
1

Hi,
I would like to map a dash dropdown for addresses to Google Maps API in order to have the autocompletion feature.
I guess this isn’t supported by Dash so far, but still wondering if it’s doable with a little hack.
Thanks!

2

I was thinking one way you could do it is to have the dropdown initiate a callback everytime the user types something in the dropdown input and then from there you can query the google maps api to get the proper autocomplete location data.

Unfortunately digging into it a little the functionality to trigger a callback when the dropdown input changes doesn’t seem to be available in dcc.Dropdown and I’m just trying to go through the documentation for react-virtualized-select to see if it is possible to add that functionality to the component later down the line.

For a quick hacky fix you can put a dcc.Input overtop of the dropdown and will let you to add this functionality but the only downside is that you’re going to have to open the dropdown to view the autocomplete results. I’ve attached some sample code that should explain better what I mean:

import dash_html_components as html
from dash.dependencies import *
import dash_core_components as dcc
import dash
import datetime as dt

app = dash.Dash('')

app.layout = html.Div([
    html.Div([
        dcc.Input(id='autocompleteInput',
                  style={
                    'width': '100%',
                    'border': '0px',
                    'line-height': '25px'
                  })
    ], style={'position': 'relative',
              'width': '97.5%',
              'top': '33px',
              'line-height': '30px',
              'left': '10px',
              'zIndex': '1000000000000'
              }),
    html.Div([
        dcc.Dropdown(id='dropdown'),
    ]),
    html.P(id='placeholder')
])

# This callback is triggered anytime anything is typed into
# dcc.Input, so from here you can use the Google maps api to
# serve with you autocomplete data based whatever address the user
# has already typed
@app.callback(Output('dropdown', 'options'),
              [Input('autocompleteInput', 'value')])
def createNewOptions(value):
    # Do the Google maps magic here and create new options in the dropdown
    # select menu so that when it is opened it's going have some new values
    if(value == 'h'):
        return [{'label': 'hi', 'value': 'hi'},
                {'label': 'hello', 'value': 'hello'}]
    elif(value == 'b'):
        return [{'label': 'bye', 'value': 'bye'},
                {'label': 'buhbye', 'value': 'buhbye'}]
    elif(value == 'bu'):
        return [{'label': 'buhbye', 'value': 'buhbye'}]
    else:
        return []

    # Will need to return a new `options` back to dropdown with property
    # autocomplete data


# This sets the dcc.Input value to the selected dropdown value in the
# case that the user selects the generated autocomplete entry
@app.callback(Output('autocompleteInput', 'value'),
              [Input('dropdown', 'value')])
def resetInput(value):
    return value


if __name__ == '__main__':
    app.run_server(debug=True)

DashCommunityExample
DashCommunityExample.gif1261×159 60.4 KB

I’ll try to see if I can add the native functionality to the dropdown when I get a chance.

1 Like
4

I am attempting to do this, suggest google maps addresses on a input text box. Was this added natively?

2 Likes