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 manage.py startapp core

Step 3 : Update setting.py

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

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

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

....
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'core',
]

....

GOOGLE_MAPS_API_KEY=YOUR_GOOGLE_API_KEY

Step 4 : Creating the Views

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

core/views.py

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:

core/templates/googleMap.html

<!DOCTYPE html>
<html lang="en">
  
<head>
    <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="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
  
<body>
    <div class="container mt-5">
        <h2>Django Google Autocomplete Address Example - Tuts-Station.com</h2>
  
        <div class="form-group">
            <label>Location/City/Address</label>
            <input type="text" name="autocomplete" id="autocomplete" class="form-control" placeholder="Choose Location">
        </div>
  
        <div class="form-group" id="latitudeArea">
            <label>Latitude</label>
            <input type="text" id="latitude" name="latitude" class="form-control">
        </div>
  
        <div class="form-group" id="longtitudeArea">
            <label>Longitude</label>
            <input type="text" name="longitude" id="longitude" class="form-control">
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  
    <script type="text/javascript"
        src="https://maps.google.com/maps/api/js?key={{ google_maps_api_key }}&libraries=places" ></script>
    <script>
        $(document).ready(function () {
            $("#latitudeArea").addClass("d-none");
            $("#longtitudeArea").addClass("d-none");
        });
    </script>
    <script>
        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();
                $('#latitude').val(place.geometry['location'].lat());
                $('#longitude').val(place.geometry['location'].lng());
  
                $("#latitudeArea").removeClass("d-none");
                $("#longtitudeArea").removeClass("d-none");
            });
        }
    </script>
</body>
</html>

Step 6 : Creating URLs

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

core/urls.py

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

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

example/urls.py

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

urlpatterns = [
    path('admin/', admin.site.urls),
    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 manage.py runserver

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

I Hope It will help you....

Previous Post
Django Ajax Post Request Example

Next Post
How to Get Unique Elements from List in Django?

How to get Query Params from Request in Django ?

Django Import Export Excel to Database Example

Django List Remove Element by Index Example

Django Google Recaptcha V3 Example

How to Integrate Highcharts.js in Django ?

Django Get Second Last Element of List Example

Django Google Address Autocomplete Example

Related Posts