Retrieve the user's location effortlessly by tapping into the browser's capabilities, rather than manually inputting location data in a Django view to find the closest shop

I am currently working on developing a convenient nearby shops application that utilizes django and GeoDjango to display the shops closest to the user's location. Instead of hard-coding the nearest shop, I aim to retrieve the user's location from their browser for more accuracy.

views.py

from django.views import generic
from django.contrib.gis.geos import Point
from django.contrib.gis.db.models.functions import Distance
from .models import Shop

longitude = -80.191_788
latitude = 25.761_681

user_location = Point(longitude, latitude, srid=4326)


class Home(generic.ListView):
    model = Shop
    context_object_name = "shops"
    queryset = Shop.objects.annotate(
        distance=Distance("location", user_location)
    ).order_by("distance")[0:6]
    template_name = "Home.html"

models.py


class Shop(models.Model):
    name = models.CharField(max_length=100)
    location = models.PointField()
    address = models.CharField(max_length=100)
    city = models.CharField(max_length=50)

Answer №1

Utilizing API services such as Google Places API can provide valuable information on nearby entities and the present location through the geolocating call integrated within the API. Explore more about Google Places API here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Develop a Vue.js component embedded within another component to manipulate data stored in the parent

After reviewing a few answers that partially address my question, I realized there is more to explain. In our Laravel project website layout, we utilize a global #app div. This means all pages share the same main Vue instance, prompting me to segregate ke ...

The Raphael gradient background does not display properly on IE7 and IE8 when applied to a path object

Here is a JavaScript code snippet: $(document).ready(function() { var paper = new Raphael(document.getElementById('canvas_container'), 1000, 1000); var tetronimo = paper.path("M 700 700 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 ...

sending XML data through Google Maps API V3

While working on integrating the google maps api v3, I encountered an issue when trying to pass an XML file to populate the map with results. Upon checking the PHP file responsible for generating the XML data, everything seems to be in order. The PHP file ...

How can I change a date string into a date object?

Seeking assistance: I am looking to generate the following: Sunday 4 October 08.30 - 10.30 CET Additionally, I would like to show the local timezone information below this line. Could someone recommend the most effective method for achieving this? Can ...

Foreign key implementation is ineffective in Django

Currently, I am facing issues with utilizing Foreignkey in my project where I am using django 1.9.7 and python3.5. models.py from django.db import models def enum(*sequential, **named): enums = dict(zip(sequential, range(len(sequential))), **named) ...

Submitting Forms in Django with AJAX for Seamless User Experience

As a newcomer to Python, I might be missing an easy fix. I'm attempting to create a registration form using Jquery with Django. I've been following this tutorial When I click the button, I see a success message in the alert, but nothing gets sa ...

Display a PDF file within an IFrame using JavaScript and then print it

Why is it so challenging to achieve? I've dedicated 48 hours to research this, yet it seems impossible! Although recent Chrome versions allow the parent window to access PDFs in iframes, both FF and IE prevent any interaction with the iframe that dis ...

What is the process for generating a JavaScript File open dialog box that can display files stored on a server?

On my website, I want clients to be able to access files stored on the server. I need to implement a file open dialog box that displays files available on the server, similar to this code: <input type="file" id="select_file" onchange="openfunction();"& ...

Script that was generated dynamically is failing to run

I have a situation where I am adding a script tag, along with other HTML content, to my current document after making an AJAX call. However, the script is not executing as expected. //Function to handle response function(responseText){ document.getEle ...

What is the procedure to assign a specific Id to an element within a class?

I am working with content that is dynamically loaded and I am looking to change the id of a specific element. Can anyone offer guidance on how to accomplish this task? ...

Exploring the concept of using variables and understanding variable scope in AJAX and JavaScript

Struggling with using variables in AJAX. Attempting to have var x store data from var data but it keeps showing as undefined in the console log. Any tips on how to fix this issue? EDIT: The variable x needs to be accessed later in the code, not just for ...

"eliminate" ng-if after the condition becomes true

I'm curious to know if it's possible to deactivate or remove ng-if once its value becomes true? In my project, I've constructed a tree structure using a recursive directive. Each branch in the tree has a <div ng-if="visible"> element ...

Can conditional statements be utilized within a React component?

Using Material UI, the CardHeader component represents the top part of a post. If the post is created by the user (isUser = true), I would like to display two buttons on the post. Is this achievable? <CardHeader avatar={ <Avatar sx={{ ...

Utilizing JavaScript within my WordPress site

I'm experiencing some issues with my JavaScript code in WordPress. I have been trying to use the following code on my page, but it doesn't seem to work properly. Can someone please guide me on how to integrate this code within my WordPress page? ...

When switching between classes, it is not possible to apply a different value to the same CSS property

I am currently working on a project that involves toggling a class on a ul tag with an id of sideNav using JavaScript. In this scenario, I have set the left attribute of the id to 0, while the same attribute in the class has a value of -100%. After sever ...

The CORS policy is preventing access to the file "sample.txt" at 'file:///sample.txt' because it is not supported for protocol schemes originating from 'null'

I am a beginner in the world of AJAX and currently exploring its fundamental concepts. In my HTML file, when I click the submit button, my intention is to retrieve and log the text from a text file located in the same directory as the HTML file. However, I ...

What is the best way to integrate cross-env with Expo?

I'm currently working on an expo app and hoping to integrate cross-env with it. To make this possible, I modified the start script in package.json to "cross-env LOCAL_IP_ADDRESS=TEST expo start", but unfortunately, the environment variable ...

Amazon S3 is not sending the 'Access-Control-Allow-Origin' header for the requested resource

Currently utilizing reactjs and axios Encountering an issue while attempting to fetch a PNG file from S3 to the local environment. Access to fetch at 'https://xxx-xxx-xxx.s3.ap-northeast-1.amazonaws.com/0.png' from origin 'http://localhost: ...

Encountering problems with displaying the index value in *ngFor directive in Angular 5

I am encountering a problem with rendering the index of *ngFor directive for a specific scenario as described below. Suppose we have an array of objects like this: this.temp = [ {name:'John',age:24,visibility:'visible'}, {name:&ap ...

Elements on the page appear and disappear as you scroll down

Whenever my scroll reaches the bottom of element B, I want my hidden sticky element to appear. And when I scroll back up to the top of element B, the sticky element should be hidden again. Here are my codes: https://i.sstatic.net/J49dT.jpg HTML <htm ...