A while back we decided to integrate the Google Map into our websites. We liked the functionality and use of the maps and wanted a way to allow our clients to be able to experience the maps on their websites. So we created a control, two actually, that allows us to place a Google Map on a Sitefinity CMS site with a single location or multiple locations.

We built the controls out using the Google Maps API, and also leveraged the ever so popular JQuery framework. The controls use a jQuery plugin called jMaps, but was altered to meet the requirements and customizations in which we felt would best suite our clients needs. The locations are added to the map via XML files. The XML file specifies the icon the location should use along with the information to be specified in the info window when you click on a marker. We also needed to allow for categorizing/grouping the locations so that one could show a certain set of locations. We also integrated the ability to get driving directions based on a certain location.

Attached to this post, you will find the code to implement the controls in your own Sitefinity site. The controls are not specific to any one version of the CMS system and utilize some of the built in dialogs of Sitefinity such as the file browser dialog. All you need to do is extract the files into your Sitefinity site, add a reference to the controls in your web.config file along with adding in the Google API key to your web.config file. The archive includes a file called example_web.config with the necessary entries in order to get the controls added into your site. Don't forget to get your Google API key so you can replace the key in the example_web.config file before you add the entry to your web.config file. Each key is specific to the domain the map is to be used on.

We also added the style sheets used on our site along with the Skins used for the RadComboBox. Since the version of your Sitefinity CMS might have a different version of the RadControls for ASP.NET AJAX then the one we use, you might need to adjust the RadComboBox and or the skin used for the control. When adding the controls to your site, you will need to already have added the jQuery framework to your site. The controls will include everything else but assumes that the framework is already added. You will also need to set the "LoadConfigurationSettings" property, found on both the single and multiple location controls, to true. This will load all the jQuery plugin and also load in the Google Map API. If this property is not set, then the map will not function. Caution, if you add the either control onto a page more than once, this property should be set to false for every additional instance. It is only needed for the first map added to a page.

Checkout the examples of the controls on our site. The single map version can be seen here, and for the multiple location version here. You can find the source files here.

Looking forward at our next implementation of this control, we are planning on getting rid of the XML files and use the GenericContent module as our platform for adding the locations to the map. This will give our clients more flexibility in adding, editing, and removing locations and make them less fearful in creating invalid XML files. Let us know what you think.