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!

Screenshot of the Maps Dialogue

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