Integrate Google-Map API library with Adobe CQ

Nowadays most of the websites have "Find our store" section to provide easy way to locate branches near user. So, I decided to write an article on integrating Google-Map API in an Adobe CQ5 application.

This is a simple article on Google-Map API and about accessing store data from JSON. I have used JSON that has sample latitude & longitude details to mark in Map.

Steps:
1.    AEM application folder structure creation.
2.    Create a template on which the render component is based.
3.    Create a render component that uses the Google Map API.
4.    Create resource folder to place store location data JSON.
5.    Create a site that contains a page to display the map.

Create a project with the below folder structure.

Sample data from JSON file placed under resource folder - 'branch.json'.

[ { "storenum": "1", "opendate": "Sun Jul 01 00:00:00 -0400 1962", "date_super": "Sat Mar 01 00:00:00 -0500 1997", "conversion": "1", "st": "05", "county": "007", "streetaddr": "2110 WEST WALNUT", "strcity": "Rogers", "strstate": "AR", "zipcode": "72756", "type_store": "Supercenter", "latitude": "36.334145", "longitude": "-94.148036" }, { "storenum": "2", "opendate": "Sat Aug 01 00:00:00 -0400 1964", "date_super": "Fri Mar 01 00:00:00 -0500 1996", "conversion": "1", "st": "05", "county": "009", "streetaddr": "1417 HWY 62/65 N", "strcity": "Harrison", "strstate": "AR", "zipcode": "72601", "type_store": "Supercenter", "latitude": "36.203334", "longitude": "-92.966037" }, { "storenum": "3", "opendate": "Tue Apr 12 00:00:00 -0400 1988", "date_super": "Wed Mar 01 00:00:00 -0500 2000", "conversion": "1", "st": "13", "county": "011", "streetaddr": "30983 HWY 441 SOUTH", "strcity": "Commerce", "strstate": "GA", "zipcode": "30529", "type_store": "Supercenter", "latitude": "34.24863", "longitude": "-83.459929" }, { "storenum": "4", "opendate": "Sun Aug 01 00:00:00 -0400 1965", "date_super": "Fri Mar 01 00:00:00 -0500 2002", "conversion": "1", "st": "05", "county": "007", "streetaddr": "2901 HWY 412 EAST", "strcity": "Siloam Springs", "strstate": "AR", "zipcode": "72761", "type_store": "Supercenter", "latitude": "36.181117", "longitude": "-94.513179" } ]

Create a template and Google-Map component

To display the component in page we need template, so first we will create a template  ,
1. Right-click the template folder within your application and select  Create -> Create Template
2. Enter required information to create basic component and name the component as googlemap
    By using component dialog, we are getting width and height of the google map from author. This can be later modified to include more properties according to business requirements.

3. Open the googlemap.jsp located at
              :/apps/(application)/components/ googlemap/googlemap.jsp.
4. Declare google map api library in a js file in clientlibs and include it in googlemap.jsp  . Since this is a simple example I have just included it in the component jsp itself.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places"></script>

<div class="container"> <h2> Search stores</h2> <label for="Enterzipcode">Enter your zipcode</label><input id="zipCode" type="text"> <input type="radio" id="miles10" name="miles" value="10" /> 10 <input type="radio" id="miles20" name="miles" value="20" /> 20 <button class="btn btn-info" id="submitZip">Submit</button> <div id="googleMap" style="width:${properties.width}px;height:${properties.height}px;"> </div> </div>

The above html code contains input elements to fetch zipcode and miles from the user. We have a div with id "googleMap" where we will be displaying the google map. Note that the width and height of the google map is fetched as CQ5 properties


<script> var map,lati=[],langi=[],centerPoint,marker,markerArray = []; var service = new google.maps.DistanceMatrixService(); $(document).ready(function(){ url = '/apps/epd/reusableproj/resources/json/branch.json/jcr:content'; map = new google.maps.Map(document.getElementById('googleMap'), { center: {lat: 40.7033127, lng: -73.979681}, zoom: 8 }); var geocoder = new google.maps.Geocoder(); var bounds = new google.maps.LatLngBounds(); var infoWindow = new google.maps.InfoWindow({map: map}); // Try HTML5 geolocation. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var pos = { lat: position.coords.latitude, lng: position.coords.longitude }; infoWindow.setPosition(pos); infoWindow.setContent('You are here'); map.setCenter(pos); }, function() { handleLocationError(true, infoWindow, map.getCenter()); }); } else { // Browser doesn't support Geolocation handleLocationError(false, infoWindow, map.getCenter()); } $("#submitZip").on("click",function(){ var miles = $('input:radio[name="miles"]:checked').val(); var zipCode = $("#zipCode").val(); geocoder.geocode({ 'address': zipCode} , function(results, status) { if (status == google.maps.GeocoderStatus.OK) { var zipLocation = results[0].geometry.location; setMarkers(null); markerArray = []; bounds = results[0].geometry.bounds; map.setCenter(zipLocation); $.getJSON(url, function(data, textstatus) { $.each(data, function(JSONIndex, JSONData) { var latlng = new google.maps.LatLng(JSONData.latitude,JSONData.longitude); var dist = google.maps.geometry.spherical.computeDistanceBetween (zipLocation, latlng); if(Math.round(dist/1000)<miles){console.log(dist/1000 +"inside"); var marker = new google.maps.Marker({ map: map, position: new google.maps.LatLng(JSONData.latitude,JSONData.longitude), }); markerArray.push(marker); bounds.extend(marker.getPosition()); } }); }); setMarkers(map); map.fitBounds(bounds); } else { if(status == "ZERO_RESULTS") alert("Please enter valid zip code "); } }); }); }) function setMarkers(map){ for (var i = 0; i < markerArray.length; i++) { markerArray[i].setMap(map); } } function handleLocationError(browserHasGeolocation, infoWindow, pos) { infoWindow.setPosition(pos); infoWindow.setContent(browserHasGeolocation ? 'Error: The Geolocation service failed.' : 'Error: Your browser doesn\'t support geolocation.'); } </script


Above jquery code gets data from JSON file, identify the stores which are nearest to user’s location and then mark these stores on the map. You can read more about using google map api here. When the page loads, the user's location is displayed, and when the user submits zipcode and miles, the nearest store location is shown on the map.

Hide/Show parsys issue in Accordion/Tab Component

Whenever we have Accordion/Tab component in author mode, placeholder in each tab would not be aligned properly as the tabs are not active. So it confuses the author and difficult to edit the content inside each tab.

To set the visibility of the parent wrapper DIV of each parsys, setting it as hidden is not a solution. If we do so it only hides exact DIV, but other parsys artifacts would still be improperly aligned.

Therefore, we need to hide each CQ parsys artifacts when these are not active.

Use the below JavaScript spinet to fix this issue.

Steps:

1.       In Accordion.jsp ,  pass parsys path to JS function by

<div class="panel">

   <div class="panel-heading" role="tab" id="heading${i}">

          Tab Title

   </div>

   <div id="faq${i}" class="panel-collapse collapse ${in}" role="tabpanel" aria-labelledby="heading${i}" data-component-id="<%= currentNode.getPath() %>/accord${i}">

     <div class="panel-body">

<cq:include path="accord${i}" resourceType="foundation/components/parsys"/>               </div>

</div>

2.  In JS script, hide all parsys when page loads

<script>

      $(window).load(function(){

var elems = $('.panel-collapse.collapse:not(.in)');        $.each(elems,function(){

            var classNames = $(this).attr('class');

            var component = $(this).attr('data-component-id'); //Parsys Path

            var parsysComp = CQ.WCM.getEditable(component);

            if (parsysComp)

            {

                parsysComp.hide();

            }

        });

    });

Above JS function, hides all parsys when page loads so all the parsys would disappear except for the active tab which has CSS class "in".

3.  Hides the parsys when tabs are not active.

    $('#accordion').on('hide.bs.collapse', function (e) {

        var component = $(e.target).attr('data-component-id');

        var parsysComp = CQ.WCM.getEditable(component);

        if (parsysComp)

        {

            parsysComp.hide();

        }

    });

4. Shows the parsys when tabs are active.

    $('#accordion').on('show.bs.collapse', function (e) {

        var component = $(e.target).attr('data-component-id');

        var parsysComp = CQ.WCM.getEditable(component);

        if (parsysComp)

        {

            parsysComp.show();

        }

    });

</script>

Final Screen: