Google Maps custom editor for EPiServer 7.5

This article was migrated from an older iteration of our website, and it could deviate in design and functionality.

EPiServer 7 is built on the Dojo JavaScript framework, allowing us to almost inifinitely extend and customize the EPiServer UI to tailor it to specific web editor needs. This post shows an example where Google Maps is used to help web editor specify coordinates for a page, block, or media property.

Estimated read time : 3 minutes

Jump to

What the Google Maps custom editor looks like

How the custom editor works

This version of the Google Maps custom editor works for any string property, meaning coordinates are saved comma-separated like “50.000,20,000” (latitude, longitude).

For details on the dijit implementation, see the extensive comments in the main Editor.js file.

How to add the Google Maps editor to your site

Place the contents of the widget folder in /ClientResources/Scripts (or a sub-folder therein):

Screenshot of widget folder in EPiServer 7.5

Include the root namespace in module.config in your site root. Note that the path attribute is relative to the ClientResources folder. The following assumes the widget folder is located at /ClientResources/Scripts/widgets/googlemaps:

Screenshot of module.config in EPiServer 7.5

Create an editor descriptor class mapping to the widget type by its namespace:

[EditorDescriptorRegistration(TargetType = typeof(string), UIHint = UIHint)]
public class CoordinatesEditorDescriptor : EditorDescriptor
{
    public const string UIHint = "CoordinatesEditorDescriptor";

    public CoordinatesEditorDescriptor()
    {
        ClientEditingClass = "tedgustaf.googlemaps.Editor";
    }
}

Next, add an EditorDescriptor attribute with the CoordinatesEditorDescriptor type to any string property:

[EditorDescriptor(EditorDescriptorType = typeof(CoordinatesEditorDescriptor))]
public virtual string Coordinates { get; set; }

You should now be able to use the Google Maps editor in EPiServer:

Screenshot of Google Maps editor in EPiServer 7.5

Simplifying property access

Instead of saving the value as a string, one could modify the dijit to support either a block type or a custom property type, as that would eliminate the need for parsing the string when you want to get the coordinates programmatically. I.e., you would be able to get coordinates like CurrentPage.Coordinates.Longitude and CurrentPage.Coordinates.Longitude, respectively.

Known issues and limitations

The editor relies on the Google Maps SDK loaded from CDN. The editor will break if you do not have an active internet connection, effectively preventing the EPiServer UI from loading.

Download

The Episerver Google Maps editor add-on is available on the Episerver NuGet feed.