Google Maps Editor for Optimizely CMS 12

Den här artikeln är inte översatt till svenska och visas därför på engelska istället.

The Google Maps editor has been updated for Optimizely CMS 12, making it easier than ever for editors to use an interactive map to specify map coordinates.

Uppskattad lästid : 3 minuter

Gå till avsnitt

Key takeaways

  • NuGet package has been renamed to GoogleMapsEditor
  • Configured with one line of code in Startup
  • Custom block type only required for culture-specific properties

Prerequisites

  • Valid API key for the Maps JavaScript API and the Places API
  • Billing must be enabled in the Google console
  • API key must be unrestricted, or enabled for e.g. localhost for local development

Getting started

1. Install the GoogleMapsEditor NuGet package from the Optimizely feed.

2. Add the following to your ConfigureServices() method in the Startup class:

services.AddGoogleMapsEditor("your API key");

You may supply additional parameters to set default zoom level and coordinates:

services.AddGoogleMapsEditor(
   apiKey: "your API key",
   defaultZoom: 5,
   defaultLatitude: 59.335643613596247,
   defaultLongitude: 18.03014159202576);

Adding properties

Coordinate properties may be of type string or GoogleMapsCoordinates, or a custom type implementing IGoogleMapsCoordinates.

For string properties, add a UIHint set to "GoogleMaps" (or use the GoogleMapsEditorDescriptor.UIHint constant):

[UIHint(GoogleMapsEditorDescriptor.UIHint)]
public virtual string MyCoordinates { get; set; }

For GoogleMapsCoordinates properties, simply add a property of that type:

public virtual GoogleMapsCoordinates MyCoordinates { get; set; }

You may find it easier to work with GoogleMapsCoordinates properties, as that separates longitude and latitude coordinates without having to do any string parsing.

However, note that the built-in GoogleMapsCoordinates type is not culture-specific.

Screenshot of Google Maps editor in Optimizely CMS 12

Culture-specific coordinates

For culture-specific coordinates, you either need to add a [CultureSpecific] attribute to a string property, or create your own block type:

  1. Create a block type implementing IGoogleMapsCoordinates
  2. Add the Longitude and Latitude properties and add [CultureSpecific] attributes to them
  3. Create a custom editor descriptor inheriting GoogleMapsEditorDescriptor and add an [EditorDescriptorRegistration] attribute targeting your custom block type

Note that you probably want to set AvailableInEditMode = false on your custom block type.

Upgrading from 1.x / CMS 11

  1. Remove previous NuGet package called "TedGustaf.Episerver.GoogleMapsEditor"
  2. Remove the associated folder under modules\_protected\
  3. Change any references to namespace TedGustaf.Episerver.GoogleMaps.* to GoogleMapsEditor
  4. Add initialization code to your Startup class

Troubleshooting

Most problems are due to invalid API keys. Check your browser console for any errors if the editor fails to load.