Django Google Address Autocomplete Example

Published On: 23/07/2022 | Category: Django Python

Hi Dev,

In this quick example, let's see django google address autocomplete example. I’m going to show you about google address autocomplete api example. I’m going to show you about address autocomplete using google place api. you will learn google autocomplete address example. Follow bellow tutorial step of django google places autocomplete.

Sometime we require to use google map autocomplete api for getting correct address with latitude an longitude with laravel. i will help you step by step how to use google map api for autocomplete address in django app. you can use this example with django all version as well.

you can see bellow preview, how it looks:

Step 1 : Create a Project

In this step, we’ll create a new django project using the django-admin. Head back to your command-line interface and run the following command:

django-admin startproject example
Step 2 : Create a App
python3 startapp core
Step 3 : Update

In this step we require to do here, do not forget to register the new app in the file. under installed apps, just add ‘core’ to the list:

And, here, we will add new variable in file fo set GOOGLE_MAPS_API_KEY. so let's add as bellow:

Next, you need to add it in the file as follows:




Step 4 : Creating the Views

In this step, we need to create the views for performing fetch record to the database.Open the core/ file and add:

from django.shortcuts import render
from django.conf import settings

def autocomplete(request):       
    return render(request, 'googleMap.html', {'google_maps_api_key': settings.GOOGLE_MAPS_API_KEY})
Step 5 : Creating the Templates

Next, open the core/templates/googleMap.html file and the add:

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Django Google Autocomplete Address Example</title>
    <link rel="stylesheet" href="">
    <script src=""></script>
    <div class="container mt-5">
        <h2>Django Google Autocomplete Address Example -</h2>
        <div class="form-group">
            <input type="text" name="autocomplete" id="autocomplete" class="form-control" placeholder="Choose Location">
        <div class="form-group" id="latitudeArea">
            <input type="text" id="latitude" name="latitude" class="form-control">
        <div class="form-group" id="longtitudeArea">
            <input type="text" name="longitude" id="longitude" class="form-control">
        <button type="submit" class="btn btn-primary">Submit</button>
    <script src=""></script>
    <script src=""></script>
    <script type="text/javascript"
        src="{{ google_maps_api_key }}&libraries=places" ></script>
        $(document).ready(function () {
        google.maps.event.addDomListener(window, 'load', initialize);
        function initialize() {
            var input = document.getElementById('autocomplete');
            var autocomplete = new google.maps.places.Autocomplete(input);
            autocomplete.addListener('place_changed', function () {
                var place = autocomplete.getPlace();
Step 6 : Creating URLs

In this section, we’ll create the urls to access our views.Go to the core/ file and update it as follows:

from django.urls import path
from .views import autocomplete
urlpatterns = [
    path('autocomplete/', autocomplete, name="autocomplete"),

Next, we will require the modify the your root preoject folder lets update the file.

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('', include('core.urls')),
Run the Server

In this step, we’ll run the local development server for playing with our app without deploying it to the web.

python runserver

Next, go to the http://localhost:8000/autocomplete address with a web browser.

I Hope It will help you....