Google Map API integration in Duda with JS and PHP

In today’s fast-paced digital environment, businesses need smarter tools to enhance user experience and engagement. Our client approached us with a specific requirement—to develop a feature that allows users to search for locations based on proximity. These locations, along with their respective names and addresses, were already stored in a structured database. The goal was to help users search for nearby locations within a defined distance from a particular point, such as their current location or a manually entered address.

To meet this requirement, we leveraged the power of Google Maps APIs, which provided the capability to calculate geospatial distances with high accuracy. This system allows end users to perform proximity-based searches by applying real-time geolocation logic, ensuring that only the locations falling within the radius are returned. This made it possible to build a smart, responsive, and location-aware interface that fits perfectly within the Duda platform ecosystem.

Challenges Faced During Development

Building a location-aware search tool on the Duda platform came with its own set of hurdles. Let’s break down some of the key problems and how we overcame them:

1. Custom Widget Creation on Duda

Duda is not a traditional CMS and has a unique structure. To integrate our solution, we had to create a custom member widget. This meant fully understanding Duda’s architecture and customizing it in a way that allowed advanced functionality, including location-based filters and API interactions.

2. Google Map API Integration

While the Google Map APIs are highly reliable, they require careful handling, especially for large datasets. We needed to calculate distances between the user’s location and all saved locations efficiently. Implementing this in a way that maintained fast response times without overloading the system was a key challenge.

3. Secure API Access via Authentication

External API calls require strict security protocols. We implemented OAuth-based authentication to ensure secure connections to the Google Maps API, preventing unauthorized access and protecting sensitive location data.

4. Fetching Data Efficiently

Another major challenge was fetching data asynchronously from both the backend and third-party APIs. We used AJAX requests in JS to load data without refreshing the page, enabling a smooth, uninterrupted user experience.

5. Filtering by Radius

Accurately filtering results within a given radius is not straightforward. Using raw SQL distance formulas can be inefficient, so we delegated this task to Google Maps APIs, which helped in filtering and ranking locations based on proximity.

Data Management & Fetching

The client provided a large dataset in spreadsheet format, containing user details along with address and geolocation data. We imported this into our database and structured it to support geospatial queries.

• We pre-processed the data to include latitude and longitude for each address
• This data was stored securely and indexed for faster queries
• Our system would fetch data in real-time based on user queries and filter it using Google’s distance matrix and geocoding services

Authentication and Security

To ensure complete security of data and user information:

• All requests to Google Maps APIs were authenticated using OAuth 2.0.
  
• Data fetching was done over secure HTTPS endpoints.
• Inputs were sanitized to prevent SQL injection or XSS attacks.
• API keys and tokens were stored securely on the backend.

Real-Time Search Logic Using JS & PHP

Here’s how our system worked end-to-end:

1. A user lands on the page and enters their current location or allows geolocation access.
2. The JS frontend sends this location to the backend via AJAX.
3. The PHP backend fetches all stored locations and calculates distances via Google Maps APIs.
4. The list is filtered based on the radius defined by the user (e.g., 5km, 10km, etc.).
5. Results are sent back to the Duda widget, dynamically updated on the UI.
6. No page reloads required—everything works in real time.

How We Solved the Problem

After assessing all requirements and technical constraints, our final solution included:

• A fully customized Duda widget is integrated seamlessly into the client’s website.
• A robust PHP backend to manage data, authentication, and logic
• Clean and responsive JS scripts to handle user input and asynchronous data fetching.
• Secure OAuth authentication to connect with Google Maps APIs.
• A search interface that was mobile-responsive, fast, and highly intuitive.

Users can now enter a location, select a search radius, and instantly view a list of relevant places nearby, based on actual data fetched from the backend and filtered using real-world distance calculations.

Member Widget Implementation Example 

Location within a particular radius

Scalability and Performance Best Practices

• Caching API Calls: Cache frequently used Google API results. Use caching mechanisms to store frequently accessed data.
• Optimize Queries: Minimize data pulled from the database; use filters before exact distance calculation.