Blogs > AEM Forms with Google Maps API's
AEM Forms
AEM Forms with Google Maps API's
August 03, 2024In today’s digital world, enhancing user experience in forms can significantly impact engagement and usability. In this blog, we’ll explore how to supercharge your Adobe Experience Manager (AEM) forms by integrating Google Maps APIs. We’ll guide you through creating dynamic forms that fetch and display the user’s current location like street, zipcode, city, state, and country data. By leveraging Google Maps APIs for geolocation, you’ll be able to create a highly interactive and user-friendly form experience. We’ll also cover the essential steps, integrating Google Maps API keys to bring this functionality to life. Join us as we dive into these powerful integrations to make your AEM forms smarter and more responsive.
API's Integration
To implement the Geolocation API in Adaptive Forms, follow these steps:
Obtain an API Key from Google : Sign up for the Google Maps platform to receive an API key. You can start with a trial key that remains valid for one year.
Create an Adaptive Form Fragment : Design a form fragment with fields to display the current address.
Invoke the Geolocation API :Trigger the API call using the click event of an image object within the Adaptive Form.
Process the API Response :Parse the JSON data returned by the API and populate the Adaptive Form fields with the extracted address information.
Create an Adaptive Form
Create an adaptive form that includes an "Image Choice" component for selecting geolocations. The form should feature multiple text boxes for entering Lane Number, Lane Name, Zip Code, City, and State. These text boxes should dynamically update based on the user’s clicking on the map image.
Log in to AEM and go to the Dashboard.
Go to Forms > Forms & Documents.
You can create an Adaptive Form or Adaptive Form Fragments
Select Image Choice component to add image.
Select multiple Text Box to fetch data dynamically.
Select the rule editor to provide the API key and fetch data using that key. You will use the code editor to write the necessary code for this operation.
Source code similar to Adobe AEM Forms Documents
navigator.geolocation.getCurrentPosition(showPosition, handleError);
function showPosition(position) {
console.log("I am inside the showPosition function");
console.log("Latitude: " + position.coords.latitude + " Longitude: " + position.coords.longitude);
var apiKey = "Provide your API Key";
var url = "https://maps.googleapis.com/maps/api/geocode/json?latlng=" + position.coords.latitude + "," + position.coords.longitude + "&key=" + apiKey;
console.log(url);
$.getJSON(url, function (data) {
if (data.status === "OK" && data.results.length > 0) {
var location = data.results[0].formatted_address;
console.log(location);
data.results[0].address_components.forEach(function(component) {
switch (component.types[0]) {
case "street_number":
streetNumber.value = component.long_name;
break;
case "route":
streetName.value = component.long_name;
break;
case "postal_code":
zipCode.value = component.long_name;
break;
case "locality":
city.value = component.long_name;
break;
case "administrative_area_level_1":
state.value = component.long_name;
break;
}
});
} else {
console.error("No results found or Geocode was not successful.");
}
}).fail(function() {
console.error("Failed to retrieve data from Google Maps API.");
});
}
function handleError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
console.error("User denied the request for Geolocation.");
break;
case error.POSITION_UNAVAILABLE:
console.error("Location information is unavailable.");
break;
case error.TIMEOUT:
console.error("The request to get user location timed out.");
break;
case error.UNKNOWN_ERROR:
console.error("An unknown error occurred.");
break;
}
}
Click on the Map Image to automatically populate the form with your current location.
I'm glad you found this article interesting and informative! Feel free to share it with your friends to spread the
knowledge.
Don't forget to follow me for upcoming blogs. Thank you!
