Adobe Experience Manager Sites & More

nsvsrk · 7/2/25

Hi all,

Please point me to a tutorial with detailed explanation on integrating Google map API with AEM:

The below URL results in 404.

https://aem4beginner.blogspot.com/integration-of-google-map-apis

Appreciate all your replies.

Thanks,

RK.

chaudharynick · 7/2/25

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>

nsvsrk · 7/2/25

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.

nsvsrk · 7/2/25

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

Thanks,

RK.

Sid_Gour · 7/3/25

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 · 9/1/25

@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!

Adobe Experience Manager Sites & More

AEM GoogleMap integration

Kautuk Sahni

Learn

Documentation

Events

Community

Support

Resources

Adobe account

Adobe