AEM GoogleMap integration | Community
Skip to main content

3 replies

chaudharynick
chaudharynick
Level 4
July 2, 2025

Hi @nsvsrk 

Google map integration can be done directly via embedding its api and calling the specific method.

you would need to generate the google maps api key from the google dashboard and then use it up.

 

example:

<!DOCTYPE html> <html> <head> <title>My Google Map</title> <style> #map { height: 400px; width: 100%; } </style> </head> <body> <h3>My Google Map Integration</h3> <div id="map"></div> <script> function initMap() { const location = { lat: 28.6139, lng: 77.2090 }; // Example: Delhi coordinates const map = new google.maps.Map(document.getElementById("map"), { zoom: 10, center: location, }); new google.maps.Marker({ position: location, map: map, title: "You are here!", }); } </script> <!-- Load the Google Maps API (replace YOUR_API_KEY) --> <script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> </script> </body> </html>
    N
    nsvsrkAuthor
    Level 8
    July 3, 2025

    Thanks @chaudharynick 

     

    What is the functionality of this code?

    Take some input from user like a pin code and output map?

     

    Kindly provide step by step instructions for achieving this.

     

    Appreciate your support.

     

    Thanks,

    RK.

    N
    nsvsrkAuthor
    Level 8
    July 3, 2025

    I see that we are displaying map based on a certain latitude and longitude.

     

    Thanks,

    RK.

      Sid_Gour
      Sid_Gour
      Level 3
      July 3, 2025

      Hi @nsvsrk ,

      Please refer below url for GoogleMap API integration with AEM,

      https://infodales.com/blogs/google-api-form.html

      Here in this example, they have explained integrating Adatptive forms with Google Map API.

      You can create a custom AEM component for GMap and integrate Map API by invoking the geolocation api and processing the response and locating the postions on the map or any further activities you want to do on map.

       

      Thanks,

      Sid

        kautuk_sahni
        Community Manager
        kautuk_sahniCommunity Manager
        Community Manager
        September 1, 2025

        @nsvsrk just checking in! Were you able to get this resolved? If one of the replies above helped—whether it completely solved the issue or simply pointed you in the right direction—marking it as accepted can make it much easier for others with the same question to find a solution. And if you found a different way to fix it, sharing your approach would be a great contribution to the community. Your follow-up not only helps close the loop but also ensures others benefit from your experience. Thanks so much for being part of the conversation!

        Kautuk Sahni
        Terms & ConditionsAccessibility statement

        Loading footer...