Article summary

Summary
Discusses how to integrate a third-party library with Adobe Experience Manager. In this example, Google MAP APIs are used.
Digital Marketing Solution(s) Adobe Experience Manager (Adobe CQ)
Audience
Developer (intermediate)
Required Skills
JavaScript, JQuery, CSS
Tested On Adobe CQ 5.5, Adobe CQ 5.6, AEM 6.3

Introduction

You can create an Adobe Experience Manager component that displays rich data by integrating with third-party libraries. For example, assume that you have a requirement to display a visual map on a web page. To address this requirement, create a Experience Manager component that integrates with the Google Map API.

gmapsdemo

Note:

This development article discusses how to integrate with the Google Map API to create an Experience Manager component that displays data. You can integrate with other third party APIs such as JQuery. For information, see Integrating the JQuery Framework into Adobe CQ.

Create an Experience Manager application folder structure

Your first step is to create an application folder structure that contains templates, components, and pages by using CRXDE Lite. 

CQAppSetup

This list describes each application folder:

  • Application name folder: Contains all of the resources that an application uses. The resources can be templates, pages, components, and so on.
  • components folder: Contains components that your application uses.
  • page folder: Contains page components. A page component is a script such as a JSP file.
  • global: Contains global components that your application uses (common may be a substitute for global).
  • templates folder: Contains templates that you can base page components on.
  • src folder: Contains source code that comprises an OSGi component (this example does not use an OSGi component).
  • install folder: Contains a compiled OSGi bundles container.

The following illustration shows the folder structure that is created for this application. Notice that the application name is applicationMap.

project

Create an application folder structure in CRXDE Lite

  1. Go to the CQ welcome page at http://[host name]:[port]; for example, http://localhost:4502.
  2. Select CRXDE Lite.
  3. Right-click the apps folder (or the parent folder), select Create, Create Folder.
  4. Enter the folder name into the Create Folder dialog box. Enter appliationMap.
  5. Repeat steps 1-4 for each folder specified in the previous illustration.
  6. Click the Save All button.

Note:

You have to click the Save All button when working in CRXDE Lite for the changes to be made.

Create a template for the map widget

Create an Experience Manager template by using CRXDE Lite that defines a consistent style for the pages in your application. A template comprises of nodes that specify the page structure. For more information about templates, see Templates.

Create a template by using CRXDE Lite

1. Go to the welcome page at http://[host name]:[port]; for example, http://localhost:4502.

2. Select CRXDE Lite.

3. Right-click the template folder (within your application), select Create, Create Template.

4. Enter the following information into the Create Template dialog box:

  • Label: The name of the template to create. Enter maptemplate.
  • Title: The title that is assigned to the template
  • Description: The description that is assigned to the template
  • Resource Type: The component's path that is assigned to the template and copied to implementing pages. Enter applicationmap/components/page/maptemplate.
  • Ranking: The order (ascending) in which this template appears in relation to other templates. Setting this value to 1 ensures that the template appears first in the list.  Add a path to Allowed Paths. Click on the plus sign and enter the following value: /content(/.*)?.

  5. Click Next for Allowed Parents.

  6. Select OK on Allowed Children.

Create a render component that uses Google Map APIs

Components are re-usable modules that implement specific application logic to render the content of your web site. You can think of a component as a collection of scripts (for example, JSPs, Java servlets, and so on) that completely realize a specific function. In order to realize this functionality, it is your responsibility as an Experience Manager developer to create scripts that perform specific functionality. For more information about components, see Components.

Note:

By default, a component has at least one default script, identical to the component's name.

The Experience Manager component uses the Google Map API to display map data. To use the Google Map API, obtain a Google Map API key. For information, see https://developers.google.com/maps/documentation/javascript/tutorial#api_key.

gmapsdemo1

Create a render component that uses the Google Map APIs

1. Go to the CQ welcome page at http://[host name]:[port]; for example, http://localhost:4502.

2. Select CRXDE Lite.

3. Right-click /apps/applicationmap/components/page, then select Create, Create Component.

4. Enter the following information into the Create Component dialog box:

  • Label: The name of the component. Enter maptemplate.
  • Title: The title that is assigned to the component
  • Description: The description that is assigned to the template
  • Super Type: foundation/components/page 

5. Select Next for Advanced Component Settings and Allowed Parents.

6. Select OK on Allowed Children.

7. Open the maptemplate.jps located at: /apps/applicationmap/components/page/maptemplate/maptemplate.jsp.

8. Enter the following JSP 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=your_google_map_key>&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> 

Note:

Replace your_google_map_key with your Google key value.

And make sure not to add <> before and after your API token.

Create an Experience Manager web page that displays map data

The final task is to create a site that contains a page that is based on the maptemplate (the template created earlier in this development article).

Create a web page that displays map data

1. Go to the welcome page at http://[host name]:[port]; for example, http://localhost:4502.

2. Select Websites.

3. From the left hand pane, select Websites.

4. Select New, New Page.

5. Specify the title of the page in the Title field.

6. Specify the name of the page in the Name field.

7. Select maptemplate from the template list that appears. This value represents the template that is created in this development article. If you do not see it, then repeat the steps in this development article. For example, if you made a typing mistake when entering in path information, the template will not show up in the New Page dialog box.

8. Open the new page that you created by double-clicking it in the right pane. The new page opens in a web browser. You should see a page displaying data similar to the previous illustration.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy