Retrieving geographical data from MySQL and displaying it on Google Maps

Presently, I've developed a page that displays all user locations (retrieved from a MySQL database) on Google Maps. However, due to the large number of 5000+ locations, the page loading time is quite slow.

I'm interested in optimizing this by only querying user locations within a specific area (the current viewing area).

What steps can I take to improve efficiency? Does the Google Maps API support the functionality I require? I've heard about geofencing in MySQL, but I am unsure how to implement it.

Thank you in advance.

https://i.sstatic.net/NPnzp.png

Answer №1

There are various ways to achieve your goal. If you have access to the longitude and latitude of users (which seems to be the case), instead of retrieving all user locations with

(select latitude, longitude from users)
, you can narrow down the search area by setting a specific range for the user's coordinates in your query. Here's an example of how your select statement could look like:

select latitude, longitude from users where latitude between (user.latitude + desiredRange and user.latitude - desiredRange) AND longitude between (user.longitude + desiredRange AND user.longitude - desiredRange);

You can determine the appropriate range based on the map.bounds property.

After obtaining the relevant data, you can update your script using a service that will remove existing markers on the map and add new ones based on the response received. This is an approximation of how your JavaScript code might appear:

get user location;
send service request for user locations and receive them in an array
remove current markers
add new markers based on service response

The PHP service implementation could resemble the following:

$minLat = $_REQUEST['lat'] - ($_REQUEST['dl'] / 2);
$maxLat = $_REQUEST['lat'] + ($_REQUEST['dl'] / 2);
$minLon = $_REQUEST['lon'] - $_REQUEST['dln'];
$maxLon = $_REQUEST['lon'] + $_REQUEST['dln'];

$query = 'SELECT locations.latitude,
locations.longitude
FROM locations
WHERE (latitude BETWEEN ' . $minLat . ' AND ' . $maxLat . ') AND
(longitude BETWEEN ' . $minLon . ' AND ' . $maxLon. ')';

}

$query = DB::query($query);

$json = array();

while($location = $query->fetch_assoc()) {
$json[] = $location;
}

header('Content-Type: application/json');
echo json_encode($json);
exit();

I hope this information proves useful to you.

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

Angular JS: techniques for retrieving a single record from a JSON data set

I have a set of JSON data, which is an array consisting of 50 objects representing individuals. Each object contains specific parameters like id and lastName. In my controller, I retrieve this data using a resolve called EmployeeResolve and store it in a ...

Regular Expression: do not include comments that are placed inside quotation marks

Using the regular expression /#(.*?)\r?\n|#(.*?)$/g, I was able to parse the following content. However, it also matches the comment within the quotes. How can I prevent this from happening? # # this is a comment # but this is '# not a c ...

Inputting Information into a MySQL Database Using an HTML Form

Hey everyone! I have a simple web form that is supposed to input data into a MySQL database. I wrote some code to check if the connection to my database was working, and it seemed fine. However, when I submitted the form, no data was actually entered into ...

Using a custom jQuery function within an Angular component class

I have a custom query function that I wrote in a JavaScript file located under the source folder (/src/assets/inlineedit.js) of my Angular application. Here is the content of the file: $.fn.inlineEdit = function(replaceWith, connectWith) { $(this).ho ...

What measures can be taken in React to ensure that only authorized users are able to access the admin privileged layout

In a hypothetical scenario, imagine having a full-stack web application with an admin-dashboard on the front-end side. Now, let's say I am NOT an admin, but I attempt to access a route like /api/admin/dashboard Within the React app, there is authent ...

How can we avoid repeated evaluations by using memoization in a function?

Currently, I am working on a jQuery function designed to switch HTML elements based on specific viewports. The concept is quite simple: <div data-swap-for="#element" data-swap-on="phone"></div> This code snippet will insert the element with t ...

Update the image and heading simultaneously when hovering over the parent div

I am looking to enhance the user experience on my website by changing the color of headings and images when a user hovers over a specific section. Currently, I have been able to achieve this effect individually for each element but not simultaneously. Any ...

Error: The value of _This.props is not defined

Hey there, I am new to working with React Native and could really use some assistance with this issue: TypeError: _props.goToScreen is not a function. Any help would be greatly appreciated, thank you in advance! In my Profile.js file, I am trying to click ...

The FOSJsRoutingBundle is unable to detect a route coming from the FOSRESTBundle

I am facing an issue with accessing an API route to a FOSRESTBundle Controller from my JS. Even though I am using the FOSJSRoutingBundle, the route is not visible, and I keep getting the 'the route xxx does not exist' error. The following is an ...

The watch function was triggered for a different key in the array from the one that

What is the best way to limit the watch function to only trigger for the selected key in the data array? import { useSessionStorage } from "@vueuse/core"; const defaultState = { data: [ { key: 1, name: "A" }, { key: 2, nam ...

retrieve the information from a specific field within the store and store it in an array

Perhaps this is a question that pertains to using pure JavaScript, but for some reason I can't seem to figure it out. I am currently working on extjs4.2 using Sencha Architect and have received a JSON response from the server in the following format: ...

The for...of loop cannot be used with the .for property since it is not iterable. (Is

let arr = [{ category: 'music', views: 20 }, { category: 'abc', views: 32 }, { category: 'bob', views: 20 } ] for (const [key, value] of arr) { console.log(key, value) } console.log(Array ...

The back-to-top feature is malfunctioning in the new Bootstrap 4 update

I've been working on adding a back-to-top button to my website using JavaScript in Bootstrap 4 with the Font Awesome icon set. It was functioning perfectly until I made some changes to the site, and now it's not working anymore. I'm pretty n ...

Implementing experimental decorators and type reconciliation in TypeScript - A step-by-step guide

My basic component includes the following code snippet: import * as React from 'react'; import { withRouter, RouteComponentProps } from 'react-router-dom'; export interface Props { }; @withRouter export default class Movies extends R ...

An invalid argument error occurred in line 4618 of jQuery version 1.4.2, with a value of NaNpx specifically

There seems to be a common exception occurring in jQuery.extend as follows: Error Message: Invalid argument. Line Number: 4618 Character Position: 4 Error Code: 0 URI: The issue I am facing is that amongst our development team, only my machine is experie ...

AngularJS: How to detect the browser's refresh event

Can AngularJS detect when the user clicks the Refresh button on the browser? Is there a built-in method in the framework for developers to access? Thank you ...

What is the best way to interact with the member variables and methods within the VideoJs function in an Angular 2 project

Having an issue with accessing values and methods in the videojs plugin within my Angular project. When the component initializes, the values are showing as undefined. I've tried calling the videojs method in ngAfterViewInit as well, but still not get ...

Unable to access 'this' within a custom operator in RxJs

I developed a unique operator that utilizes the this keyword, but I am encountering an issue where it always returns undefined. Even though I used bind to pass this into the function. My special operator function shouldLoadNewOptimizationData() { retu ...

What is the best way to send a populated custom class from JavaScript to a .NET MVC app using AJAX?

I am working with a .NET class in C# called BusinessModel: public class BusinessModel { public string BlobName { get; set; } public string NewName { get; set; } } In my MVC Ajax Controller, I have an action called DoBusiness: [HttpPost] public A ...

Error: A surprise 'dot' token was found while defining the function

As part of my API development, I'm working on creating a register route. However, I encountered an issue when trying to utilize the User.function - AddUser method from my model file. The error message mentions an unexpected token .. Below is the code ...