Xperience by Kentico Google Maps integration allows users to add an address input field with validation and autocomplete to their websites via a new form component using the Forms application.
| Xperience Version | Library Version |
|---|---|
| >= 29.0.3 | 1.0.0 |
This integration is not yet distributed as a NuGet package.
You can add it to your project by cloning the repository and referencing the src/Kentico.Xperience.GoogleMaps/Kentico.Xperience.GoogleMaps.csproj project in your solution
The integration uses Google Cloud console APIs, which must be configured together with your Xperience project when setting up the integration.
- Sign in to Google Cloud console. You will need to create a Google account if you don't already have one.
- Create a new Google Cloud project.
- Enable the following APIs:
- Create an API key for your project. You will later use this key when configuring the Google Maps integration in your Xperience project.
-
In
Program.cs, call theAddXperienceGoogleMapsmethod with thebuilder.Configurationparameter when registering services into the application's service container. The method must be called afterAddKentico.WebApplicationBuilder builder = WebApplication.CreateBuilder(args); builder.Services.AddKentico(); builder.Services.AddXperienceGoogleMaps(builder.Configuration);
-
Add the following configuration keys to your application's configuration providers (
appsettings.jsonby default). Use the API you generated for your Google Cloud console project in the previous steps."CMSXperienceGoogleMaps": { "APIKey": "<Google Maps API key>" }
-
The integration provides a
<google-maps />Razor Tag Helper that includes the scripts and styles necessary for the integration to function. Include the Tag Helper to a suitable location in your Razor view hierarchy using the@addTagHelperdirective. Add the Tag Helper to your top-level_ViewImports.cshtmlfile to make it available everywhere.@using Kentico.Xperience.GoogleMaps @addTagHelper *, Kentico.Xperience.GoogleMaps
-
Place the
<google-maps />Tag Helper in the<head>tag of your page's HTML structure as defined by your Razor layout hierarchy. The Tag Helper must be placed everywhere where forms that use the address autocomplete form component are rendered.<google-maps />
To customize the appearance of the autocomplete panel, you can use the following CSS classes:
xperience-address-dropdown- the main container of the autocomplete dropdownxperience-address-dropdown-item- the container of each item in the dropdownxperience-address-dropdown-item:hover- the hover effect of the dropdown itemxperience-address-dropdown-item.active- the active item in the dropdownxperience-address-dropdown-item-logo- the container of the Google Maps logo dropdown item
Keep in mind Google's usage policies.
To see the guidelines for Contributing to Kentico open source software, please see Kentico's CONTRIBUTING.md for more information and follow the Kentico's CODE_OF_CONDUCT.
Instructions and technical details for contributing to this project can be found in Contributing Setup.
Distributed under the MIT License. See LICENSE.md for more information.
This project has Kentico Labs limited support.
See SUPPORT.md for more information.
For any security issues see SECURITY.md.