---
title: Displaying dynamic maps
related:
  - https://docs.kentico.com/k12sp/developing-websites/defining-website-content-structure/creating-and-configuring-page-types.md
  - https://docs.kentico.com/k12sp/developing-websites/loading-and-displaying-data-on-websites/writing-transformations.md
---

> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).

Kentico offers two ways of displaying dynamic maps on a page:

- Page-related maps - display geographical locations based on the properties of specified pages. You can display multiple locations at the same time.
- [Data source maps](#data-source-maps) - displays geographical location based on a data source web part. For example, a pages data source, query data source, xml data source web part or others. You can display multiple locations at the same time.

Either of these can use the Google maps or Bing maps service.

## Page-related maps

Page-related maps allow you to display multiple predefined places on a map. The places that the map displays are loaded from pages that you specify. The usual example is a list of pages, each representing a different company office. By default, the _CMS.Office_ page type can be used for this purpose, but any page type with fields specifying a geographical location will do. The web part (**Google maps web part** or **Bing maps web part**) then loads the geographical coordinates off of these pages and displays them on the map.

The process consists of two steps:

1. [Setting up the pages from which the map loads data.](#pages-from-which-you-can-display-data-on-a-map)
2. [Placing a page-related map on a page.](#placing-a-page-related-map-on-a-page)

### Pages from which you can display data on a map

The pages from which you can display data on a map need to have fields that represent a geographical location. These pages need to have either of these:

- Two fields representing _latitude_ and _longitude_. \
  —OR—
- A field or multiple fields representing an address in a human-readable form.

You can use the predefined _CMS.Office_ page type to load data onto a map. You can also use the page type as a reference when creating your own page types.

### Placing a page-related map on a page

1. In the **Pages** application,navigate to the page on which you want to display the map.

2. Switch to the **Design** tab.

3. [Place](https://docs.kentico.com/k12sp/developing-websites/developing-websites-using-portal-engine/using-and-configuring-web-parts.md#adding-web-parts) the **Google maps** or the **Bing maps** web part on the page. The **web part properties** dialog opens.

4. Specify the **Path** to the pages from which you want the map to load data.

5. **Select** the **Page types** that you want the map to load. For example, _CMS.Office_.

6. **Load a human-readable address onto the map**

   If you want the map to use a human-readable address, specify the **Field name** that the **Page types** use for location in the **Location field** property. For example, _OfficeAddress_ in the _CMS.Office_ page type loads the first address line. You can also specify multiple field names separated by semicolons, for example, _OfficeAddress;OfficeCity_, if the whole address is divided into more than one field.

   - You can select the **Use server processing** option if you want the system to process and cache the processed (translated to latitude and longitude) **Location or address** field. If you decide to do so, please check that your map service query limits (IP-based) are sufficient for your needs.

   —OR—

   **Load coordinates onto the map**

   If you want the map to use coordinates, specify the **Field names** that the **Page types** use for longitude and latitude in the **Longitude field** and **Latitude field** properties. For example, _OfficeLatitude_ and _OfficeLongitude_ from the _CMS.Office_ page type.

   - Using latitude and longitude allows the system to process the location faster. These properties can also be more accurate.

7. Fill in either the **Default location or address** or the **Default Latitude** and **Default Longitude** fields. These fields represent the map's initial view location.

8. Specify the rest of the web part properties, especially in the **Transformation**, **Content**, and **Map properties** categories. Hover over a property to see its description.

9. Click **OK**.

The page now displays a map with markers at the locations retrieved from the page fields you specified. For example:

![Google maps web part displaying specified locations](https://docs.kentico.com/docsassets/k12sp/displaying-dynamic-maps/MapWithMarkers.png "Google maps web part displaying specified locations")

## Data source maps

Data source maps allow you to display multiple places on a map. The places that the map displays are loaded from a predefined data source web part. The usual example is a Page data source web part, which the map uses to load data from a list of pages. Each of the pages can represent a different company office, for example. By default, the _CMS.Office_ page type can be used for this purpose, but any page type with fields specifying a geographical location will do. The web part (**Basic Google maps web part** or **Basic Bing maps web part**) then loads the geographical coordinates from these pages and displays them on the map.

> **Info:** The described process uses the **Page data source** web part.

The process consists of the following:

1. [Setting up the pages from which the map loads data.](#pages-from-which-you-can-display-data-on-a-map)
2. [Placing a data source that defines which pages are loaded into the map](#placing-a-page-data-source)
3. Placing a data source map on a page.

### Pages from which you can display data on a map

The pages from which you can display data on a map need to have fields that represent a geographical location. These pages need to have either of these:

- Two fields representing _latitude_ and _longitude_. \
  —OR—
- A field or multiple fields representing an address in a human readable form.

You can use the predefined _CMS.Office_ page type to load data from onto a map. You can also use the page type as a reference when creating your own page types.

### Placing a page data source

1. In the **Pages** application,navigate to the page on which you want to display the map.
2. Switch to the **Design** tab.
3. [Place](https://docs.kentico.com/k12sp/developing-websites/developing-websites-using-portal-engine/using-and-configuring-web-parts.md#adding-web-parts) the **Pages data source** web part on the page. The **web part properties** dialog opens.
4. Specify the **Path** to the pages from which you want the map to load data.
5. **Select** the **Page types** that you want the map to load. For example, _CMS.Office_.
6. Click **OK**.

You can now connect the data source to a map web part.

### Placing a data source map on a page

1. In the **Pages** application,navigate to the page on which you want to display the map.

2. Switch to the **Design** tab.

3. [Place](https://docs.kentico.com/k12sp/developing-websites/developing-websites-using-portal-engine/using-and-configuring-web-parts.md#adding-web-parts) the **Basic Google maps** or the **Basic Bing maps** web part on the page. The **web part properties** dialog opens.

4. Enter the **Data source name**.

5. **Load a human-readable address onto the map**

   If you want the map to use a human-readable address, specify the **Field name** that the **Page types** use for location in the **Location field** property. For example, _OfficeAddress_ in the _CMS.Office_ page type loads the first address line. You can also specify multiple field names separated by semicolons, for example, _OfficeAddress;OfficeCity_, if the whole address is divided into more than one field.

   - You can select the **Use server processing** option if you want the server to process and cache the processed (translated to latitude and longitude) **Location or address** field. If you decide to do so, please check that your map service query limits (IP-based) are sufficient for your needs.

   —OR—

   **Load coordinates onto the map**

   If you want the map to use coordinates, specify the **Field names** that the **Page types** use for longitude and latitude in the **Longitude field** and **Latitude field** properties. For example, _OfficeLatitude_ and _OfficeLongitude_ from the _CMS.Office_ page type.

   - Using latitude and longitudeallows the system to process the location faster. These properties can also be more accurate.

6. Fill in either the **Default location or address** or the **DefaultLatitude** and **DefaultLongitude** fields. These fields represent the map's initial view location.

7. Specify the rest of the web part properties, especially in the **Transformation**, **Content**, and **Map properties** categories. Hover over a property to see its description.

8. Click **OK**.

The page now displays a map with markers at the locations retrieved from the pages you specified in the Page data source web part. For example:

![Basic Google maps web part displaying locations loaded from a connected Page data source](https://docs.kentico.com/docsassets/k12sp/displaying-dynamic-maps/MapWithMarkersDataSource.png "Basic Google maps web part displaying locations loaded from a connected Page data source")