Integrating Calendar and Google Maps in CMSMS
Tuesday, January 19th, 2010I recently had to do a website for a family friend who’s getting married. They were having a destination wedding, and one of the things they wanted to do on the site was have calendar items below a Google Map, with the addresses associated with the events reflected on the map.
I could have had it be a little redundant, but this is the sort of puzzle I like figuring out, so I set to work.
I use CMS Made Simple for most of the sites I do for folks nowadays, because it’s open source and excellently put together.
I installed Calguy’s Calendar and Google Maps modules, and set to work. I created an upcoming list template to display all the events; pretty easy.
One of the field definitions on the Calendar module was “Address” so that they could put in the event’s location. This would come in handy for my map points!
Next was getting the map set up. After setting up the module with the API key for Google Maps, I created an new map and added a central map point. (the map won’t display without one, something I didn’t realize at first)
The Google Maps module includes a plugin for creating dynamic map points on the fly. I created another upcoming list template in the calendar module to automatically create these map points dynamically. Sample code below. I had to use the smarty “assign” function to get them to work correctly; don’t ask me why.
{foreach from=$events key=key item=event}
{assign var=event_title value=$event.event_title}
{assign var=event_date value=$event.event_date_start|date_format:"%e"}
{assign var=event_summary value=$event.event_summary}
{assign var=event_address value=$event.fields.Address}
{cggm_add_dynpoint map=1 name="$event_title" address="$event_address" description="$event_summary"}
{/foreach}
This way, any new calendar item they created would be created on the map!
Note: when you add any code or dynamic points, make sure to add them below wherever you create the map! Otherwise they don’t show up!




