--- title: "Google Maps" description: "The Project Maps Component can be used to display a Google Map on a Page." path: https://www.eonshowroom.eon.com/en/specials/google-maps.html lastModified: 2024-11-18T11:38:08.377Z --- # Google Maps # Google Maps ## Essen : Brucker Holt 58 ![Wind energy on sea](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Offshore_Wind_Production_Sun_Rise%3A3-1?fmt=webp) ### Welcome at E.ON Service GmbH in Essen **Large Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## Essen : Opernplatz 1 ![Kid enjoys rain](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/kid_enjoys_rain%3A3-1?fmt=webp) ### Welcome at Innogy in Essen, Germany **Small Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## Wien: Wienerbergstraße 9 ![Sun energy](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON-solarpark-tucson_sky%3A3-1?fmt=webp) ### Welcome at E.ON in Austria **Large Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## Essen : Brüsseler Platz 1 ![Wind energy on sea](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Offshore_Wind_Production_Sun_Rise?fmt=webp) ### Welcome at E.ON in Essen, Germany **Small Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## Essen : I. Dellbrügge 7 ![Kid enjoys rain](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/kid_enjoys_rain%3A3-1?fmt=webp) ### Welcome at Service Cente in Essen, Germany **Large Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## München: Arnulfstraße 203 ![Kid enjoys snow](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/kid_enjoys_snow%3A3-1?fmt=webp) ### Welcome at München EDG **Small Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## Landshut: E.ON-Allee 5 ![Kid enjoys snow](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/kid_enjoys_snow%3A3-1?fmt=webp) ### Welcome at Landshut EDG **Large Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## Milano MI: Via Amerigo Vespucci, 2 ![Sun energy](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON-solarpark-tucson_sky%3A3-1?fmt=webp) ### Welcome at E.ON in Milano MI, Italy **Small Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. [How to Configure](#how-to) ### Description The Project Maps Component can be used to display a Google Map on a Page. - Map Component featuring Google Maps - Different Colors and Sizes for Info Layers - Info Layer is an Experience Fragment - Filtering is possible [Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/content-map-map--interactive) ### Inspirations ## Wien: Wienerbergstraße 9 ![Sun energy](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON-solarpark-tucson_sky%3A3-1?fmt=webp) ### Welcome at E.ON in Austria **Large Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## Milano MI: Via Amerigo Vespucci, 2 ![Sun energy](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON-solarpark-tucson_sky%3A3-1?fmt=webp) ### Welcome at E.ON in Milano MI, Italy **Small Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## Essen : Opernplatz 1 ![Kid enjoys rain](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/kid_enjoys_rain%3A3-1?fmt=webp) ### Welcome at Innogy in Essen, Germany **Small Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## Essen : Brüsseler Platz 1 ![Wind energy on sea](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Offshore_Wind_Production_Sun_Rise?fmt=webp) ### Welcome at E.ON in Essen, Germany **Small Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## München: Arnulfstraße 203 ![Kid enjoys snow](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/kid_enjoys_snow%3A3-1?fmt=webp) ### Welcome at München EDG **Small Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## Essen : Brucker Holt 58 ![Wind energy on sea](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Offshore_Wind_Production_Sun_Rise%3A3-1?fmt=webp) ### Welcome at E.ON Service GmbH in Essen **Large Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## Essen : I. Dellbrügge 7 ![Kid enjoys rain](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/kid_enjoys_rain%3A3-1?fmt=webp) ### Welcome at Service Cente in Essen, Germany **Large Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## Landshut: E.ON-Allee 5 ![Kid enjoys snow](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/kid_enjoys_snow%3A3-1?fmt=webp) ### Welcome at Landshut EDG **Large Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## Essen : Brüsseler Platz 1 ![Wind energy on sea](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Offshore_Wind_Production_Sun_Rise?fmt=webp) ### Welcome at E.ON in Essen, Germany **Small Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## Milano MI: Via Amerigo Vespucci, 2 ![Sun energy](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON-solarpark-tucson_sky%3A3-1?fmt=webp) ### Welcome at E.ON in Milano MI, Italy **Small Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## Wien: Wienerbergstraße 9 ![Sun energy](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON-solarpark-tucson_sky%3A3-1?fmt=webp) ### Welcome at E.ON in Austria **Large Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## München: Arnulfstraße 203 ![Kid enjoys snow](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/kid_enjoys_snow%3A3-1?fmt=webp) ### Welcome at München EDG **Small Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## Landshut: E.ON-Allee 5 ![Kid enjoys snow](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/kid_enjoys_snow%3A3-1?fmt=webp) ### Welcome at Landshut EDG **Large Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## Essen : Brucker Holt 58 ![Wind energy on sea](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Offshore_Wind_Production_Sun_Rise%3A3-1?fmt=webp) ### Welcome at E.ON Service GmbH in Essen **Large Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## Essen : Opernplatz 1 ![Kid enjoys rain](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/kid_enjoys_rain%3A3-1?fmt=webp) ### Welcome at Innogy in Essen, Germany **Small Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## Essen : I. Dellbrügge 7 ![Kid enjoys rain](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/kid_enjoys_rain%3A3-1?fmt=webp) ### Welcome at Service Cente in Essen, Germany **Large Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ### Usage Rules & Features ##### Features - Map Component featuring Google Maps - Info Layer is an Experience Fragment ##### Properties - Select Map Items via Content Path and Filter it - Choose Zoom-Level ##### Design - Different Colors and Sizes for Info Layers - If adding Filter Buttons, choose Order and Layout ##### In which Grid Columns does it fit? | Grid Columns | Does it fit? | | --- | --- | | 2 | no | | 3 | no | | 4 | no | | 5 | no | | 6 | yes | | 8 | yes | | 9 | yes | | 10 | yes | | 12 | yes | ##### DO's - Add Google Maps API Key to Foundation NG Site Config - Create an individual Experience Fragment for each Project Map Data Entry ##### DONT's - Don't use it often in smaller Grid than 6 Column Grid ## Configuration ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_4-1%3A3-1?fmt=webp-alpha) ### Create Experience Fragment At first, Editor needs to create an Experience Fragment in Experience Fragments Part. [Find out more about Experience Fragment Handling](https://www.eonshowroom.eon.com/en/aem-basics/experience-fragment-handling.html) ![Create Version and add Project Map Data Entry Component](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/map-item_add%3A2-1?fmt=webp) ### Create Versions & Add Project Map Data Entry In the Experience Fragment, a Project Map Data Entry Component needs to be added. It is also possible to [create different Variations](/content/foundationNG/en/aem-basics/experience-fragment-handling.html) of each Project Map Data Entry. For Example, they can be used for different Language Versions of one Entry. #### Keep in Mind It is necessary to create an individual Experience Fragment for each Project Map Data Entry. [Read more about Experience Fragment Handling](https://www.eonshowroom.eon.com/en/aem-basics/experience-fragment-handling.html) ![Configure Project Map Marker Information](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/map-item_config%3A3-4?fmt=webp) ### Configure Project Map Marker Information Neccessary Information to configure Project Map Marker Information are the **Latitude** and **Longitude** Values where the Marker should be placed. They have to be written with maximum 6 Numbers after the Comma. Beside that, Editor can configure: - Name of the Project Enter a Name for the Project. - Name of the Location Enter the Name of the Location, e.g. the Name of the City. - Filter topic(s) Add [Tags](https://www.eonshowroom.eon.com/en/aem-basics/tagging.html) as Filter Topics, which will be used for Filtering the Items. Ensure Icon is configured for those Tags. - Use small Info Layer Select the Checkbox to use small Layout Version. Otherwise, large Layout Version. - Background Color Choose a Background Color for Info Layer. ![Add an Image](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/map-item_img%3A3-4?fmt=webp) ### Add Image for Info Layer In the Image Tab, Editor can add an Image and adjust it in same Way as for normal Image Component. The Image can only be cropped with 3:1 Ratio and will appear in Top of Info Layer, directly after the Project Information Header. [Read more about Image Component](https://www.eonshowroom.eon.com/en/content-elements/image.html) [Read more about Image Handling](https://www.eonshowroom.eon.com/en/aem-basics/image-handling.html) [Read more about WebP Options](https://www.eonshowroom.eon.com/en/aem-basics/webp-image-options.html) ![Add content of Info Layer](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/map-item_parsys%3A2-1?fmt=webp) ### Add Content of Info Layer Furthermore, the Info Layer has a Parsys, where Content can be added. Available Content Components for this Parsys are: - [Button](/content/foundationNG/en/content-elements/button.html) - [Headline](/content/foundationNG/en/content-elements/headline.html) - [Image](/content/foundationNG/en/content-elements/image.html) - [Links](/content/foundationNG/en/content-elements/link.html) - **Spacer** (creates some Space, no further Options then hiding it per Viewport) - [Table](/content/foundationNG/en/content-elements/table.html) - [Text](/content/foundationNG/en/content-elements/table.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/foundation-ng_site-config%3A16-9?fmt=webp) ### Add API Key to Configuration Page To configure the Project Map, Editor needs to provide a [Google Map API Key](https://developers.google.com/maps/documentation/javascript/get-api-key). This Key must be added to Foundation NG Site Config. [Read more about Configuration Pages](https://www.eonshowroom.eon.com/en/aem-basics/configuration-pages.html) ![Configure Project Map itself](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/map_config%3A1-1?fmt=webp) ### Add & Configure Project Map on Page As far as all Project Map Data Entries are created as Experience Fragment, Editor needs to go to the Page, where the Map should be placed on, and add the Project Map Component. To configure the Project Map, Editor can enable Marker Clustering on the Map for Users by checking corresponding Checkbox. Moreover, Topic Filtering can be used as follow: - None (default) - Tags with Icons - Tags with Count - Tags with Icon and Count [Read more about Tagging](https://www.eonshowroom.eon.com/en/aem-basics/tagging.html) Furthermore, Tag Pill (Filer) Sort Order can be defined to be be alphabetically, or by Count of Results. Additionally, the Count can be hidden. Beside that, a Zoom Level can be choosen. Available Zoom Level are: - None (0) - Low (5) - Medium (10) - High (15) - Max (25) ![Add Data Entries](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/map_item-settings%3A1-1?fmt=webp) ### Add Data Entries At last, Editor needs to connect the Map Items to the Map by adding the Path to each of the Experience Fragment Versions that should be included. Also Subpages can be included automatically. Another way of adding Map Items to the Map, is by using Tags. Therefore, AND or OR Tags can be selected. In **AND** Field, **all** of the selected Tags must be matched, while in **OR** Field **any** of the selected Tags must be matched. [Read more about Tagging](https://www.eonshowroom.eon.com/en/aem-basics/tagging.html)