Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

AEM Google Maps API Integration

Avatar

Level 10

Hi,

I tried AEM Google Maps API Integration descried in the below UR:

Adobe Experience Manager Help | Integrating custom Adobe Experience Manager Component with third-par...

When I created a page and opened it, the following is what I see.

Capture.PNG

I read that this code was tested on Adobe CQ 5.5, Adobe CQ 5.6, while I am using AEM 6.1.

Kindly guide me.

Thanks,

Rama.

1 Accepted Solution

Avatar

Correct answer by
Administrator

Just replace maptemplate.jps with following code :

<html>

  <head>

    <style>

       #map {

        height: 400px;

        width: 100%;

       }

    </style>

  </head>

  <body>

    <h3>My Google Maps Demo</h3>

    <div id="map"></div>

    <script>

      function initMap() {

        var uluru = {lat: -25.363, lng: 131.044};

        var map = new google.maps.Map(document.getElementById('map'), {

          zoom: 4,

          center: uluru

        });

        var marker = new google.maps.Marker({

          position: uluru,

          map: map

        });

      }

    </script>

    <script async defer

    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCVJYehUvkKZNcxsWx8vjD6FPDZBCRegX4&callback=initMap">

    </script>

      <script type="text/javascript">

     function getMap(lat,lng) {

        var myOptions = {

          center: new google.maps.LatLng(lat,lng),

          zoom: 8,

          mapTypeId: google.maps.MapTypeId.ROADMAP

        };

        var map = new google.maps.Map(document.getElementById("map"),

            myOptions);

      }

    </script>

      <form >

  Latitude: <input type="text" name="lat" value="37.3041" />

  Longitude: <input type="text" name="lng" value="-121.8727"/>

  <button type="button" onclick="getMap(lat.value,lng.value)" >Click Me!</button>

</form>

  </body>

    <cq:include path="par" resourceType="foundation/components/parsys" />

</html>

And make sure not to add <> before and after your API token. In above code replace API key with your API key.

It would work. Just tested it on AEM 6.3



Kautuk Sahni

View solution in original post

16 Replies

Avatar

Level 4

Did you get any javascript console errors?

Avatar

Level 6

the adobe article looks straight forward integration apart from slightly code in 6.1

Do you see any console errors in browser. That might help to debug whats going on.

Avatar

Level 10

Hi all,

PFB the Browser Console messages:

Object { stack: "", 5 more… }  runner.js:166

Object { stack: "", 5 more… }  Promise-backend.js:935

[INFO] resizeVideo()  first_aem63_website.html:689:4

[INFO] resizeVideo()  aem63_sling_model_exporter.html:669:4

[INFO] resizeVideo()  toy_login.html:623:4

@deprecated  $.validator ; use foundation-validation  foundation.js:1242:13

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help http://xhr.spec.whatwg.org/  granite.js:226:15

@deprecated  $.validator ; use foundation-validation  foundation.js:1242:13

"Google Maps API warning: InvalidKey https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key"  util.js:229:12

"Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required"  util.js:229:12

"Google Maps API error: InvalidKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key-map-error"  js:40:473

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help http://xhr.spec.whatwg.org/  2332596:2:1155

Thanks,

Rama.

Avatar

Level 10

Hi,

I used an old key.

Again got the key and used, without any success.

Google Map is displayed for a few seconds, before displaying the above screen.

Pl suggest how I could send the package of this system, so that you could deploy and see.

Thanks,

Rama.

Avatar

Level 10

To the best of my knowledge and experience with google map.

You have to allow certain domains on your google map account. A map will only load on these pages (with whitelisted domains) else you would see it for 1-2 sec and then the above message would appear.

Domains can be allowed like : localhost:8080, xyx.com

Get API Key  |  Google Maps JavaScript API  |  Google Developers

Thanks

Avatar

Level 10

Hi,

Could you please guide me on this domain registration?

The AEM Google Maps API Integration descried in the below URL does not address this requirement,

Adobe Experience Manager Help | Integrating custom Adobe Experience Manager Component with third-par...

Thanks,

Rama.

Avatar

Administrator

[This is more of Google Maps Question than AEM]

Some Pointers to check here:

1. Make sure you inserted the API key correctly

2. Make sure you generated "Google Maps JavaScript API" key not Android, iOS, etc. key.

3. While copying API, make your you have enabled it

4. Try the HTML code mentioned here Adding a Google Map with a Marker to Your Website  |  Google Maps JavaScript API  |  Google Develope...  instead of code present in Article. [Make sure to cope API key in the code]

5. Also try copy pasting the code directly in HTML file and check in the Chrome browser.

6. Just check if there is some restrictions set within API console https://console.developers.google.com/flows/enableapi , if so revove it.

6. If above things still doesn't work, please create a question in Google Forums.

@edubey "You have to allow certain domains on your google map account."

I guess this is not required now. But it would be great if you can share some information related to this.



Kautuk Sahni

Avatar

Level 10

There is a note in the article that states --

Replace your_google_map_key with your Google key value.

Make sure you can get Google Maps workign in a non-AEM web app first, Then once you get it working with your key and everything works - then port it into AEM.

Avatar

Level 10

More information here -- i just got my Google key here:

Getting Started  |  Google Maps JavaScript API  |  Google Developers

Once i embedded the KEY into the code - it worked perfectly on 6.3 --

GoogleMap.png

Avatar

Level 10

Hi Scott,

I replaced your_google_map_key with my Google key value.

Your page worked, without you having to register your domain?

Is there a way I could send in my package to you?

Thanks,

Rama.

Avatar

Level 10

Put into a GOOGLE DRIVE and send me URL!

Avatar

Level 10

Hi Scott,

PFB the sharable link.

GoogleMaps.zip - Google Drive

Appreciate your support.

Thanks,

Rama.

Avatar

Correct answer by
Administrator

Just replace maptemplate.jps with following code :

<html>

  <head>

    <style>

       #map {

        height: 400px;

        width: 100%;

       }

    </style>

  </head>

  <body>

    <h3>My Google Maps Demo</h3>

    <div id="map"></div>

    <script>

      function initMap() {

        var uluru = {lat: -25.363, lng: 131.044};

        var map = new google.maps.Map(document.getElementById('map'), {

          zoom: 4,

          center: uluru

        });

        var marker = new google.maps.Marker({

          position: uluru,

          map: map

        });

      }

    </script>

    <script async defer

    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCVJYehUvkKZNcxsWx8vjD6FPDZBCRegX4&callback=initMap">

    </script>

      <script type="text/javascript">

     function getMap(lat,lng) {

        var myOptions = {

          center: new google.maps.LatLng(lat,lng),

          zoom: 8,

          mapTypeId: google.maps.MapTypeId.ROADMAP

        };

        var map = new google.maps.Map(document.getElementById("map"),

            myOptions);

      }

    </script>

      <form >

  Latitude: <input type="text" name="lat" value="37.3041" />

  Longitude: <input type="text" name="lng" value="-121.8727"/>

  <button type="button" onclick="getMap(lat.value,lng.value)" >Click Me!</button>

</form>

  </body>

    <cq:include path="par" resourceType="foundation/components/parsys" />

</html>

And make sure not to add <> before and after your API token. In above code replace API key with your API key.

It would work. Just tested it on AEM 6.3



Kautuk Sahni

Avatar

Level 10

Hi Kautuk,

This has worked like a magic.

Thanks a million for directing me correctly.

Rama.