{"id":37693,"date":"2025-04-21T06:50:06","date_gmt":"2025-04-21T06:50:06","guid":{"rendered":"https:\/\/www.iflair.com\/?p=37693"},"modified":"2025-04-21T06:51:27","modified_gmt":"2025-04-21T06:51:27","slug":"google-map-api-integration-in-duda-with-js-and-php","status":"publish","type":"post","link":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/google-map-api-integration-in-duda-with-js-and-php\/","title":{"rendered":"Google Map API integration in Duda with JS and PHP"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row css_animation=&#8221;&#8221; row_type=&#8221;row&#8221; use_row_as_full_screen_section=&#8221;no&#8221; type=&#8221;grid&#8221; angled_section=&#8221;no&#8221; text_align=&#8221;left&#8221; background_image_as_pattern=&#8221;without_pattern&#8221; el_class=&#8221;mx-0&#8243; z_index=&#8221;&#8221;][vc_column][vc_single_image image=&#8221;37699&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221; css=&#8221;&#8221; qode_css_animation=&#8221;&#8221;][\/vc_column][\/vc_row][vc_row css_animation=&#8221;&#8221; row_type=&#8221;row&#8221; use_row_as_full_screen_section=&#8221;no&#8221; type=&#8221;grid&#8221; angled_section=&#8221;no&#8221; text_align=&#8221;left&#8221; background_image_as_pattern=&#8221;without_pattern&#8221; el_class=&#8221;mx-0&#8243; z_index=&#8221;&#8221; css=&#8221;.vc_custom_1586517129021{padding-top: 30px !important;}&#8221;][vc_column][vc_row_inner row_type=&#8221;row&#8221; type=&#8221;full_width&#8221; text_align=&#8221;left&#8221; css_animation=&#8221;&#8221; el_class=&#8221;custom-ul-with-text-wrapper&#8221;][vc_column_inner][vc_column_text css=&#8221;.vc_custom_1745216629807{padding-top: 5px !important;padding-bottom: 5px !important;}&#8221;]<\/p>\n<h2><strong>Understanding the Client\u2019s Vision for Location-Aware Search<\/strong><\/h2>\n<p>[\/vc_column_text][vc_column_text css=&#8221;&#8221;]<span style=\"font-weight: 400;\">In today\u2019s fast-paced digital environment, businesses need smarter tools to enhance user experience and engagement. Our client approached us with a specific requirement\u2014to 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.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To meet this requirement, we leveraged the power of <\/span><b>Google Maps APIs<\/b><span style=\"font-weight: 400;\">, 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.<\/span>[\/vc_column_text][vc_empty_space height=&#8221;10px&#8221;][vc_column_text css=&#8221;.vc_custom_1745216877385{padding-top: 5px !important;padding-bottom: 5px !important;}&#8221;]<\/p>\n<h3><b>Technologies Used<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">We carefully selected a tech stack to match the project\u2019s needs. These included:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Duda Widgets<\/b><span style=\"font-weight: 400;\"> \u2013 For front-end customization within the client\u2019s platform<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Google Map APIs<\/b><span style=\"font-weight: 400;\"> \u2013 For geolocation and distance calculation<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>PHP<\/b><span style=\"font-weight: 400;\"> \u2013 As the backend scripting language for data handling and business logic<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>JavaScript (JS)<\/b><span style=\"font-weight: 400;\"> \u2013 For frontend interactivity and asynchronous communication<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>OAuth Authentication<\/b><span style=\"font-weight: 400;\"> \u2013 To securely access and integrate with external APIs<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>AJAX<\/b><span style=\"font-weight: 400;\"> \u2013 To handle real-time, asynchronous data loading<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>MySQL<\/b> \u2013 To store and manage user and location data<\/li>\n<\/ul>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;10px&#8221;][vc_column_text css=&#8221;&#8221;]<\/p>\n<h2><strong>Challenges Faced During Development<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">Building a location-aware search tool on the Duda platform came with its own set of hurdles. Let\u2019s break down some of the key problems and how we overcame them:<\/span>[\/vc_column_text][vc_empty_space height=&#8221;10px&#8221;][vc_column_text css=&#8221;&#8221;]<\/p>\n<h3><b>1. Custom Widget Creation on Duda<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Duda is not a traditional CMS and has a unique structure. To integrate our solution, we had to create a <\/span><b>custom member widget<\/b><span style=\"font-weight: 400;\">. This meant fully understanding Duda\u2019s architecture and customizing it in a way that allowed advanced functionality, including location-based filters and API interactions.<\/span><\/p>\n<h3><b>2. Google Map API Integration<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">While the <\/span><b>Google Map APIs<\/b><span style=\"font-weight: 400;\"> are highly reliable, they require careful handling, especially for large datasets. We needed to calculate distances between the user&#8217;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.<\/span><\/p>\n<h3><b>3. Secure API Access via Authentication<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">External API calls require strict security protocols. We implemented <\/span><b>OAuth-based authentication<\/b><span style=\"font-weight: 400;\"> to ensure secure connections to the Google Maps API, preventing unauthorized access and protecting sensitive location data.<\/span><\/p>\n<h3><b>4. Fetching Data Efficiently<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Another major challenge was <\/span><b>fetching data<\/b><span style=\"font-weight: 400;\"> asynchronously from both the backend and third-party APIs. We used <\/span><b>AJAX<\/b><span style=\"font-weight: 400;\"> requests in <\/span><b>JS<\/b><span style=\"font-weight: 400;\"> to load data without refreshing the page, enabling a smooth, uninterrupted user experience.<\/span><\/p>\n<h3><b>5. Filtering by Radius<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Accurately filtering results within a given radius is not straightforward. Using raw SQL distance formulas can be inefficient, so we delegated this task to <\/span><b>Google Maps APIs<\/b><span style=\"font-weight: 400;\">, which helped in filtering and ranking locations based on proximity.<\/span>[\/vc_column_text][vc_empty_space height=&#8221;10px&#8221;][vc_column_text css=&#8221;&#8221;]<\/p>\n<h3><b>Data Management &amp; Fetching<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">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.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">We pre-processed the data to include latitude and longitude for each address<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">This data was stored securely and indexed for faster queries<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\">Our system would <b>fetch data<\/b> in real-time based on user queries and filter it using Google\u2019s distance matrix and geocoding services<\/li>\n<\/ul>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;10px&#8221;][vc_column_text css=&#8221;&#8221;]<\/p>\n<h3><b>Authentication and Security<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">To ensure complete security of data and user information:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">All requests to <\/span><b>Google Maps APIs<\/b><span style=\"font-weight: 400;\"> were authenticated using OAuth 2.0.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Data fetching was done over secure HTTPS endpoints.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Inputs were sanitized to prevent SQL injection or XSS attacks.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">API keys and tokens were stored securely on the backend.<\/span><\/li>\n<\/ul>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;10px&#8221;][vc_column_text css=&#8221;&#8221;]<\/p>\n<h3><b>Real-Time Search Logic Using JS &amp; PHP<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Here\u2019s how our system worked end-to-end:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">A user lands on the page and enters their current location or allows geolocation access.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">The <\/span><b>JS frontend<\/b><span style=\"font-weight: 400;\"> sends this location to the backend via AJAX.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">The <\/span><b>PHP backend<\/b><span style=\"font-weight: 400;\"> fetches all stored locations and calculates distances via <\/span><b>Google Maps APIs.<\/b><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">The list is filtered based on the radius defined by the user (e.g., 5km, 10km, etc.).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Results are sent back to the <\/span><a href=\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/seamless-cruise-data-integration-with-duda-widget-for-enhanced-user-experience\/\"><b>Duda widget<\/b><\/a><span style=\"font-weight: 400;\">, dynamically updated on the UI.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">No page reloads required\u2014everything works in real time.<\/span><\/li>\n<\/ol>\n<p>[\/vc_column_text][vc_column_text css=&#8221;&#8221;]<\/p>\n<h2><strong>How We Solved the Problem<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">After assessing all requirements and technical constraints, our final solution included:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">A fully customized <\/span><b>Duda widget<\/b><span style=\"font-weight: 400;\"> is integrated seamlessly into the client\u2019s website.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">A robust <\/span><b>PHP backend<\/b><span style=\"font-weight: 400;\"> to manage data, authentication, and logic<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Clean and responsive <\/span><b>JS scripts<\/b><span style=\"font-weight: 400;\"> to handle user input and asynchronous data fetching.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Secure <\/span><b>OAuth authentication<\/b><span style=\"font-weight: 400;\"> to connect with <\/span><b>Google Maps APIs.<\/b><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">A search interface that was mobile-responsive, fast, and highly intuitive.<\/span><\/li>\n<\/ul>\n<p>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.[\/vc_column_text][vc_empty_space height=&#8221;10px&#8221;][vc_column_text css=&#8221;&#8221;]<\/p>\n<h3><b> Member Widget Implementation Example\u00a0<\/b><\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;10px&#8221;][vc_single_image image=&#8221;37697&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221; css=&#8221;&#8221; qode_css_animation=&#8221;&#8221;][vc_empty_space height=&#8221;10px&#8221;][vc_column_text css=&#8221;&#8221;]<\/p>\n<h3><b>Location within a particular radius<\/b><\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;10px&#8221;][vc_single_image image=&#8221;37698&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221; css=&#8221;&#8221; qode_css_animation=&#8221;&#8221;][vc_empty_space height=&#8221;10px&#8221;][vc_column_text css=&#8221;&#8221;]<\/p>\n<h3><b>Scalability and Performance Best Practices<\/b><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Caching API Calls:<\/b><span style=\"font-weight: 400;\"> Cache frequently used Google API results. Use caching mechanisms to store frequently accessed data.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Optimize Queries:<\/b> Minimize data pulled from the database; use filters before exact distance calculation.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_row_inner row_type=&#8221;row&#8221; type=&#8221;full_width&#8221; text_align=&#8221;left&#8221; css_animation=&#8221;&#8221; css=&#8221;.vc_custom_1715260600126{margin-top: 20px !important;padding-top: 60px !important;padding-bottom: 60px !important;background-image: url(https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/wp-content\/uploads\/2024\/05\/Hire-Expert-Qusar-Developers-for-the-Smart-Web-App-Development-\u2013-1.jpg?id=26671) !important;}&#8221; el_class=&#8221;custom-ul-with-text-wrapper&#8221;][vc_column_inner width=&#8221;1\/2&#8243;][vc_column_text css=&#8221;&#8221;]<\/p>\n<h3 style=\"text-align: left;\"><span style=\"color: #ffffff;\"><strong>Integrate Google Maps API for Seamless Location Search<\/strong><\/span><\/h3>\n<p>[\/vc_column_text]<a  itemprop=\"url\" href=\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/contact-us\/\" target=\"_self\"  class=\"qbutton  default home-banner-section home-banner-button\" style=\"margin: 35px 0px 0px 0px; border-radius: 5pxpx;-moz-border-radius: 5pxpx;-webkit-border-radius: 5pxpx; \">Get Started<\/a>[\/vc_column_inner][vc_column_inner width=&#8221;1\/2&#8243;][\/vc_column_inner][\/vc_row_inner][vc_row_inner row_type=&#8221;row&#8221; type=&#8221;full_width&#8221; text_align=&#8221;left&#8221; css_animation=&#8221;&#8221; css=&#8221;.vc_custom_1707119979398{margin-top: 20px !important;}&#8221;][vc_column_inner][vc_column_text css=&#8221;.vc_custom_1707911356934{padding-top: 20px !important;padding-bottom: 20px !important;}&#8221;]<\/p>\n<h4><strong>The Way Forward<\/strong><\/h4>\n<p>[\/vc_column_text][vc_column_text css=&#8221;&#8221;]<span style=\"font-weight: 400;\">Creating this custom member widget using <\/span><b>Duda<\/b><span style=\"font-weight: 400;\">, <\/span><a href=\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/amazing-tips-to-search-for-an-experienced-php-development-company\/\"><b>PHP<\/b><\/a><span style=\"font-weight: 400;\">, and <\/span><b>Google Map APIs<\/b><span style=\"font-weight: 400;\"> has laid a strong foundation for scalable, location-driven functionality. Looking ahead, there\u2019s vast potential to expand its capabilities. Features such as category-based filtering, user rating integration, and real-time location tracking can take the experience to the next level. We also see great value in connecting this system with external services like <\/span><b>Google Places<\/b><span style=\"font-weight: 400;\"> for richer and more dynamic results.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">By designing the backend with modularity in mind and making the widget settings easily configurable, this solution is not only powerful but also reusable across different <\/span><b>Duda<\/b><span style=\"font-weight: 400;\"> websites and client projects, offering both flexibility and efficiency for future development.<\/span>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row][vc_row css_animation=&#8221;&#8221; row_type=&#8221;row&#8221; use_row_as_full_screen_section=&#8221;no&#8221; type=&#8221;grid&#8221; angled_section=&#8221;no&#8221; text_align=&#8221;left&#8221; background_image_as_pattern=&#8221;without_pattern&#8221; css=&#8221;.vc_custom_1707119045703{background-color: #ffffff !important;}&#8221; z_index=&#8221;&#8221; el_class=&#8221;contact-form-section pt-auto mx-0 custom_page_new&#8221; el_id=&#8221;contact-us&#8221;][vc_column][vc_row_inner row_type=&#8221;row&#8221; type=&#8221;full_width&#8221; text_align=&#8221;left&#8221; css_animation=&#8221;&#8221; el_class=&#8221;contact-form-wrapper mx-0&#8243;][vc_column_inner el_class=&#8221;form-home-top&#8221;][vc_column_text css=&#8221;.vc_custom_1644228956305{padding-bottom: 10px !important;}&#8221;]<\/p>\n<h2 style=\"text-align: center;\"><strong>Free Consultation<\/strong><\/h2>\n<p>[\/vc_column_text]\n<div class=\"wpcf7 no-js\" id=\"wpcf7-f12-o1\" lang=\"en-US\" dir=\"ltr\" data-wpcf7-id=\"12\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/iflair_site\/wp-json\/wp\/v2\/posts\/37693#wpcf7-f12-o1\" method=\"post\" class=\"wpcf7-form init default\" aria-label=\"Contact form\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"12\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.4\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"en_US\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f12-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/><input type=\"hidden\" name=\"_wpcf7dtx_version\" value=\"5.0.4\" \/>\n<\/fieldset>\n<span class=\"wpcf7-form-control-wrap dynamic_hidden-72\" data-name=\"dynamic_hidden-72\"><input type=\"hidden\" name=\"dynamic_hidden-72\" class=\"wpcf7-form-control wpcf7-hidden wpcf7dtx wpcf7dtx-hidden dtx-pageload\" aria-invalid=\"false\" value=\"Google Map API integration in Duda with JS and PHP\" data-dtx-value=\"CF7_get_post_var%20key%3D%27title\"><\/span>\n<div class=\"cmn-form-two-column-input\">\n\t<p class=\"cmn-form-input\"><label>Name*<\/label><span class=\"wpcf7-form-control-wrap\" data-name=\"your-name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"your-name\" \/><\/span>\n\t<\/p>\n\t<p class=\"cmn-form-input\"><label>Email*<\/label><span class=\"wpcf7-form-control-wrap\" data-name=\"your-email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"email\" name=\"your-email\" \/><\/span>\n\t<\/p>\n<\/div>\n<p class=\"cmn-form-input\"><label>Phone Number*<\/label><span class=\"wpcf7-form-control-wrap\" data-name=\"Phone-Number\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-tel wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-tel\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"tel\" name=\"Phone-Number\" \/><\/span>\n<\/p>\n<p class=\"cmn-form-input cmn-form-textarea\"><label>Description*<\/label><span class=\"wpcf7-form-control-wrap\" data-name=\"your-message\"><textarea cols=\"40\" rows=\"2\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" name=\"your-message\"><\/textarea><\/span>\n<\/p>\n<p class=\"cmn-submit-btn\"><input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"Submit your inquiry\" \/>\n<\/p><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n[\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>In today\u2019s fast-paced digital environment, businesses need smarter tools to enhance user experience and engagement. Our client approached us with a specific requirement\u2014to develop a feature that allows users to search for locations based on proximity. <\/p>\n","protected":false},"author":17,"featured_media":37699,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[45],"tags":[1436,80,1303,1382,1433,1434,1435],"class_list":["post-37693","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Google Map API integration in Duda with JS and PHP | iFlair<\/title>\n<meta name=\"description\" content=\"Integrate Google Maps API with Duda using JS &amp; PHP to create a secure, real-time, location-aware search tool with proximity filtering.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/google-map-api-integration-in-duda-with-js-and-php\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Google Map API integration in Duda with JS and PHP | iFlair\" \/>\n<meta property=\"og:description\" content=\"Integrate Google Maps API with Duda using JS &amp; PHP to create a secure, real-time, location-aware search tool with proximity filtering.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/google-map-api-integration-in-duda-with-js-and-php\/\" \/>\n<meta property=\"og:site_name\" content=\"iFlair Web Technologies\" \/>\n<meta property=\"article:published_time\" content=\"2025-04-21T06:50:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-21T06:51:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/wp-content\/uploads\/2025\/04\/Google-Map-APIintegration-in-Dudawith-Js-and-PHP.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1680\" \/>\n\t<meta property=\"og:image:height\" content=\"850\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Lopa Das\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Lopa Das\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/google-map-api-integration-in-duda-with-js-and-php\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/google-map-api-integration-in-duda-with-js-and-php\/\"},\"author\":{\"name\":\"Lopa Das\",\"@id\":\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/#\/schema\/person\/32540d636887c1656eae2456a94741bc\"},\"headline\":\"Google Map API integration in Duda with JS and PHP\",\"datePublished\":\"2025-04-21T06:50:06+00:00\",\"dateModified\":\"2025-04-21T06:51:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/google-map-api-integration-in-duda-with-js-and-php\/\"},\"wordCount\":1542,\"publisher\":{\"@id\":\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/#organization\"},\"image\":{\"@id\":\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/google-map-api-integration-in-duda-with-js-and-php\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/wp-content\/uploads\/2025\/04\/Google-Map-APIintegration-in-Dudawith-Js-and-PHP.jpg\",\"keywords\":[\"OAuth authentication\",\"PHP Development\",\"Duda widgets\",\"duda widget php\",\"Authentication\",\"Google Map APIs\",\"Duda integration\"],\"articleSection\":[\"PHP Development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/google-map-api-integration-in-duda-with-js-and-php\/\",\"url\":\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/google-map-api-integration-in-duda-with-js-and-php\/\",\"name\":\"Google Map API integration in Duda with JS and PHP | iFlair\",\"isPartOf\":{\"@id\":\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/google-map-api-integration-in-duda-with-js-and-php\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/google-map-api-integration-in-duda-with-js-and-php\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/wp-content\/uploads\/2025\/04\/Google-Map-APIintegration-in-Dudawith-Js-and-PHP.jpg\",\"datePublished\":\"2025-04-21T06:50:06+00:00\",\"dateModified\":\"2025-04-21T06:51:27+00:00\",\"description\":\"Integrate Google Maps API with Duda using JS & PHP to create a secure, real-time, location-aware search tool with proximity filtering.\",\"breadcrumb\":{\"@id\":\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/google-map-api-integration-in-duda-with-js-and-php\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/google-map-api-integration-in-duda-with-js-and-php\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/google-map-api-integration-in-duda-with-js-and-php\/#primaryimage\",\"url\":\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/wp-content\/uploads\/2025\/04\/Google-Map-APIintegration-in-Dudawith-Js-and-PHP.jpg\",\"contentUrl\":\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/wp-content\/uploads\/2025\/04\/Google-Map-APIintegration-in-Dudawith-Js-and-PHP.jpg\",\"width\":1680,\"height\":850,\"caption\":\"Google Map APIintegration in Dudawith Js and PHP\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/google-map-api-integration-in-duda-with-js-and-php\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Google Map API integration in Duda with JS and PHP\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/#website\",\"url\":\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/\",\"name\":\"iflair.com\",\"description\":\"Together We Grow\",\"publisher\":{\"@id\":\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/#organization\",\"name\":\"iFlair Web Technologies Pvt. Ltd.\",\"alternateName\":\"iFlair\",\"url\":\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/wp-content\/uploads\/2025\/07\/logo-site.jpg\",\"contentUrl\":\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/wp-content\/uploads\/2025\/07\/logo-site.jpg\",\"width\":600,\"height\":315,\"caption\":\"iFlair Web Technologies Pvt. Ltd.\"},\"image\":{\"@id\":\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/#\/schema\/person\/32540d636887c1656eae2456a94741bc\",\"name\":\"Lopa Das\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/0.gravatar.com\/avatar\/3017cf980d30e9ee79c2b3cb16b58f54?s=64&d=mm&r=g\",\"contentUrl\":\"https:\/\/0.gravatar.com\/avatar\/3017cf980d30e9ee79c2b3cb16b58f54?s=64&d=mm&r=g\",\"caption\":\"Lopa Das\"},\"description\":\"With over 13 years of experience, Lopa Das is a seasoned professional at iFlair Web Technologies Pvt Ltd, specializing in web and mobile app development. Her technical expertise spans across Laravel, PHP, CodeIgniter, CakePHP, React, Vue.js, Nuxt.js, iOS, Android, Flutter, and React Native. Known for her exceptional skills in team handling, client communication, presales, and risk analysis, Lopa ensures seamless project execution from start to finish. Her proficiency in Laravel CRM, Next.js, and mobile app development makes her a valuable asset in delivering robust, scalable solutions.\",\"url\":\"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/author\/lopa-das\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Google Map API integration in Duda with JS and PHP | iFlair","description":"Integrate Google Maps API with Duda using JS & PHP to create a secure, real-time, location-aware search tool with proximity filtering.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/google-map-api-integration-in-duda-with-js-and-php\/","og_locale":"en_US","og_type":"article","og_title":"Google Map API integration in Duda with JS and PHP | iFlair","og_description":"Integrate Google Maps API with Duda using JS & PHP to create a secure, real-time, location-aware search tool with proximity filtering.","og_url":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/google-map-api-integration-in-duda-with-js-and-php\/","og_site_name":"iFlair Web Technologies","article_published_time":"2025-04-21T06:50:06+00:00","article_modified_time":"2025-04-21T06:51:27+00:00","og_image":[{"width":1680,"height":850,"url":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/wp-content\/uploads\/2025\/04\/Google-Map-APIintegration-in-Dudawith-Js-and-PHP.jpg","type":"image\/jpeg"}],"author":"Lopa Das","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Lopa Das","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/google-map-api-integration-in-duda-with-js-and-php\/#article","isPartOf":{"@id":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/google-map-api-integration-in-duda-with-js-and-php\/"},"author":{"name":"Lopa Das","@id":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/#\/schema\/person\/32540d636887c1656eae2456a94741bc"},"headline":"Google Map API integration in Duda with JS and PHP","datePublished":"2025-04-21T06:50:06+00:00","dateModified":"2025-04-21T06:51:27+00:00","mainEntityOfPage":{"@id":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/google-map-api-integration-in-duda-with-js-and-php\/"},"wordCount":1542,"publisher":{"@id":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/#organization"},"image":{"@id":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/google-map-api-integration-in-duda-with-js-and-php\/#primaryimage"},"thumbnailUrl":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/wp-content\/uploads\/2025\/04\/Google-Map-APIintegration-in-Dudawith-Js-and-PHP.jpg","keywords":["OAuth authentication","PHP Development","Duda widgets","duda widget php","Authentication","Google Map APIs","Duda integration"],"articleSection":["PHP Development"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/google-map-api-integration-in-duda-with-js-and-php\/","url":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/google-map-api-integration-in-duda-with-js-and-php\/","name":"Google Map API integration in Duda with JS and PHP | iFlair","isPartOf":{"@id":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/#website"},"primaryImageOfPage":{"@id":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/google-map-api-integration-in-duda-with-js-and-php\/#primaryimage"},"image":{"@id":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/google-map-api-integration-in-duda-with-js-and-php\/#primaryimage"},"thumbnailUrl":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/wp-content\/uploads\/2025\/04\/Google-Map-APIintegration-in-Dudawith-Js-and-PHP.jpg","datePublished":"2025-04-21T06:50:06+00:00","dateModified":"2025-04-21T06:51:27+00:00","description":"Integrate Google Maps API with Duda using JS & PHP to create a secure, real-time, location-aware search tool with proximity filtering.","breadcrumb":{"@id":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/google-map-api-integration-in-duda-with-js-and-php\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/google-map-api-integration-in-duda-with-js-and-php\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/google-map-api-integration-in-duda-with-js-and-php\/#primaryimage","url":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/wp-content\/uploads\/2025\/04\/Google-Map-APIintegration-in-Dudawith-Js-and-PHP.jpg","contentUrl":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/wp-content\/uploads\/2025\/04\/Google-Map-APIintegration-in-Dudawith-Js-and-PHP.jpg","width":1680,"height":850,"caption":"Google Map APIintegration in Dudawith Js and PHP"},{"@type":"BreadcrumbList","@id":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/google-map-api-integration-in-duda-with-js-and-php\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/"},{"@type":"ListItem","position":2,"name":"Google Map API integration in Duda with JS and PHP"}]},{"@type":"WebSite","@id":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/#website","url":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/","name":"iflair.com","description":"Together We Grow","publisher":{"@id":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/#organization","name":"iFlair Web Technologies Pvt. Ltd.","alternateName":"iFlair","url":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/#\/schema\/logo\/image\/","url":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/wp-content\/uploads\/2025\/07\/logo-site.jpg","contentUrl":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/wp-content\/uploads\/2025\/07\/logo-site.jpg","width":600,"height":315,"caption":"iFlair Web Technologies Pvt. Ltd."},"image":{"@id":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/#\/schema\/person\/32540d636887c1656eae2456a94741bc","name":"Lopa Das","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/#\/schema\/person\/image\/","url":"https:\/\/0.gravatar.com\/avatar\/3017cf980d30e9ee79c2b3cb16b58f54?s=64&d=mm&r=g","contentUrl":"https:\/\/0.gravatar.com\/avatar\/3017cf980d30e9ee79c2b3cb16b58f54?s=64&d=mm&r=g","caption":"Lopa Das"},"description":"With over 13 years of experience, Lopa Das is a seasoned professional at iFlair Web Technologies Pvt Ltd, specializing in web and mobile app development. Her technical expertise spans across Laravel, PHP, CodeIgniter, CakePHP, React, Vue.js, Nuxt.js, iOS, Android, Flutter, and React Native. Known for her exceptional skills in team handling, client communication, presales, and risk analysis, Lopa ensures seamless project execution from start to finish. Her proficiency in Laravel CRM, Next.js, and mobile app development makes her a valuable asset in delivering robust, scalable solutions.","url":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/author\/lopa-das\/"}]}},"_links":{"self":[{"href":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/wp-json\/wp\/v2\/posts\/37693","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/wp-json\/wp\/v2\/comments?post=37693"}],"version-history":[{"count":0,"href":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/wp-json\/wp\/v2\/posts\/37693\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/wp-json\/wp\/v2\/media\/37699"}],"wp:attachment":[{"href":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/wp-json\/wp\/v2\/media?parent=37693"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/wp-json\/wp\/v2\/categories?post=37693"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/wp-json\/wp\/v2\/tags?post=37693"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}