--- title: Map contact description url: "https://www.toujou.com/service/element-library/map-elements/map-contact-description/" date: 2019-06-18 modified: 2022-09-27 --- # Map contact description 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Element library](https://www.toujou.de/service/element-library/) 4. [Map elements](https://www.toujou.de/service/element-library/map-elements/) 5. [Map contact description](https://www.toujou.de/service/element-library/map-elements/map-contact-description/) Map with contact information ============================ A square or 16:9 map with contact information on either side. Item-IDs: 06-001 | 06-002 | 06-003 | 06-004[ ](https://www.toujou.de/datenschutz/) [Sample views](#c1006028) [Step by step guide](#c1006030) [Screen adaptation](#c1006032) [Get a Google API Key](https://cloud.google.com/maps-platform/#get-started) ![](https://www.toujou.de/_assets/processed/lsKfVgzi-pQoPVezc4WsJXHr6gECK9mf_aiKsYdb95I/q:85/w:433/h:54/fn:Y3NtXzA2XzAxX2NvbnRhY3RfaWNvbnNfMmY2NDU3YTI4OQ:t/cb:eb70eb170a5209db325ffe30f0f26c1b34606971/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA2X01hcF9lbGVtZW50cy8wNl8wMV9jb250YWN0X2ljb25zLnBuZw) --- Sample views -------------- #### Square To display third-party HTML content, we need your consent. For more information, please see our [ privacy policy. ](https://www.toujou.de/privacy-statement/) Allow once Always allow DFAU GmbH --------- Graf-Pückler-Limpurg-Str. 87 90768 Fürth Phone: [+49 911 23980-870](tel:+4991123980870) Email: [ ](https://www.facebook.com/toujou.typo3/) [ ](https://twitter.com/toujou_de) [ ](https://www.instagram.com/toujou.de/) [ ](https://www.linkedin.com/company/12834142) --- #### 16:9 To display third-party HTML content, we need your consent. For more information, please see our [ privacy policy. ](https://www.toujou.de/privacy-statement/) Allow once Always allow DFAU GmbH --------- Graf-Pückler-Limpurg-Str. 87 90768 Fürth Phone: [+49 911 23980-870](tel:+4991123980870) Email: [ ](https://www.facebook.com/toujou.typo3/) [ ](https://twitter.com/toujou_de) [ ](https://www.instagram.com/toujou.de/) [ ](https://www.linkedin.com/company/12834142) --- Step by step guide -------------------- [ ![](https://www.toujou.de/_assets/processed/fNvPslvfg9avirUMaUCW7bKDfZTUklEjK78GIGo3wAY/q:85/w:432/h:270/fn:Y3NtXzA2XzAxXzAxX25ldWVzX2NvbnRhY3RfZWxlbWVudF8wYzA1YTllNDcw:t/cb:cd728e0afa93d5d1078cb9da4a05f137401c007c/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA2X01hcF9lbGVtZW50cy8wNl8wMV9jb250YWN0X2luZm8vMDZfMDFfMDFfbmV1ZXNfY29udGFjdF9lbGVtZW50LnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/06_Map_elements/06_01_contact_info/06_01_01_neues_contact_element.png) ### Create new element - Click on the **+ Content** button to create any map element. [ ![](https://www.toujou.de/_assets/processed/fhMUIQT8Q6SnwDqKoAdZ4CXzm8r41RXLEE9d3r9M1jk/q:85/w:432/h:270/fn:Y3NtXzA2XzAxXzAyX2NvbnRhY3RfZWxlbWVudF93YWVobGVuX2MwMDc2MWZjZDQ:t/cb:b74c99ca86c2ebb95e91ba499526269c87160983/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA2X01hcF9lbGVtZW50cy8wNl8wMV9jb250YWN0X2luZm8vMDZfMDFfMDJfY29udGFjdF9lbGVtZW50X3dhZWhsZW4ucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/06_Map_elements/06_01_contact_info/06_01_02_contact_element_waehlen.png) ### Select map element - In the *Map Elements* tab, select the map contact element of your choice that is named accordingly. [ ![](https://www.toujou.de/_assets/processed/yQ4MUmMiNid7SztdRRTb_hxZXRnslo6N510HohYpWzo/q:85/w:432/h:270/fn:Y3NtXzA2XzAxXzAzX2NvbnRhY3Rfd2FlaGxlbl8wNmM1MmFhMTg3:t/cb:0f56b72ac81b42152ebf0cd724bc6dcd2eb7e23a/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA2X01hcF9lbGVtZW50cy8wNl8wMV9jb250YWN0X2luZm8vMDZfMDFfMDNfY29udGFjdF93YWVobGVuLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/06_Map_elements/06_01_contact_info/06_01_03_contact_waehlen.png) ### Select contact - The tab *Choose Business-Contact* offers a dropdown list of your current contacts that you have already set in the *[Contact Information](https://www.toujou.de/service/tutorials/contact-data/)* module. --- Screen adaptation ------------------- A *map with contact information* reflects your chosen contact information next to a Google map with a fixed square or 16:9 aspect ratio. **Responsive behaviour**: If there isn’t enough space to display the map and the contact information next to each other, the contact information will be shown directly below. This ensures the consistent appearance of all maps on small devices, regardless of the original orientation. **Worth noting**: - The contact data is determined beforehand by the basic settings you made in the Contact Information module. The text area can’t be edited. - To display an address correctly, you’ll need a [Google API key from the Google Cloud Platform](https://cloud.google.com/maps-platform/#get-started). --- Linked topics ------------- [toujou set-ups](https://www.toujou.de/service/toujou-set-up/) & [TYPO3 tutorials](https://www.toujou.de/service/tutorials/) related to this element description. [Contact information](https://www.toujou.de/service/tutorials/contact-data/)