September 6, 2011 / / Adobe

Google Maps component for Adobe CQ5

I’ve completed building my first custom component for Adobe CQ5 and what else to build but the HelloWorld of modern day websites? A Google Map component!

With this component you can now simple drag and drop a map onto a page, then click the edit button to enter the address that the map should display.

 

The process to build the component was quite easy, as follows;

  1. Write (ok.. steal) the HTML code to make Map appear in a browser
  2. Create a new component in CRXDE in the Apps director (using the wizard)
  3. Copy / Paste my working HTML code into the created JSP file for the component
  4. Test the compoent works as is (it should by now start showing up in SideKick – assuming you go into Design mode and allow the component to be displayed.. eg in parsys)
  5. Add a nice icon
  6. Create a dialogue (or copy and modify another one from something like the title component like I did)
  7. Tweak the code to pull the values from the dialogue.
  8. Test, package, share on your blog!

Maps Dialogue of Google Maps component for Adobe CQ5

 

I have several enhancements as well as new components I need to complete, but if you have requests please let me know in the comments below.

Download my Google Maps component for Adobe CQ5!

GoogleMaps-1.2 component for Adobe CQ5

CategoriesAdobe CQ/AEM

TagsCQ5 Custom Component Google Maps

Written by:

7 Comments

  2. ankit
    September 18, 2012

    I want to search some location on map using radius search.
    Where shold i store the data so that it should not slow down the performance.

    In CRX repository or some other DB??

  3. Mark Szulc
    September 19, 2012

    @ankit – depends on the context of you needing to store the data. If you are making changes as a content author you can store the settings in CRX under the component node where the component instance is. This is how the map address is stored today. If you wanted to set a series of addresses (eg Store or Branch locations) then you could just extend the component to do so.

  4. ankit
    September 21, 2012

    Thanks Mark.
    I have 5000+ branch locations to store and that data is in .csv file.So
    1) How to import .csv in crx?
    2)if i store the data in crx,then Do you have any example code to share that how to extend the component?

  5. Vivien
    September 21, 2012

    Hi Ankit,

    It depends on several things. First, do you want to do a manual import, or do you want a periodic or an on event import?
    Basically, to import a CSV file, you copy this CSV file in the CRX. It will launch an event that you can catch and then parse the file and store the data as you wish in the CRX.

    Here’s a quick example:

    @Component (metatype = false, immediate = true)
    @Service
    public class CSVImportExample implements EventListener {

    @Reference
    private SlingRepository mRepository;

    private Session session = null;
    …

    @Activate
    protected void activate(ComponentContext pComponentContext) {
    try {

    session = mRepository.loginAdministrative(null);
    ObservationManager m = session.getWorkspace()
    .getObservationManager();
    String[] types = {“nt:file” };
    m.addEventListener(this, Event.NODE_ADDED, IMPORT_PATH,
    true, null, types, false);
    …

    } catch (RepositoryException e) {
    …
    }
    }

    @Deactivate
    protected void deactivate(ComponentContext ctx) {
    if (session != null) {
    session.logout();
    }
    }

    public void onEvent(EventIterator pIt) {
    try {
    while (pIt.hasNext()){
    Event event = pIt.nextEvent();
    String filePath = event.getPath();
    if (filePath.endsWith(“.csv/jcr:content”)) {
    Do what you have to do here
    }
    }

    } catch (Exception e1) {
    …
    }
    }
    }

    HTH

  6. Vikram
    February 19, 2014

    Hi, I have a requirement where i want to searh a location in a text box and then if at that location my office exists, it will highlight that location on the map, else any nearby location where my office exists.

Comments are closed.