Django Google Address Autocomplete Example
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 ProjectIn 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 exampleStep 2 : Create a App
python3 manage.py startapp coreStep 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....