--- title: "Location finder in toujou: Manual, sample view, pieces of advice" url: "https://www.toujou.com/service/element-library/widgets/location-finder/" description: Step-by-step instructions for creating the location finder for TYPO3 websites in toujou including screenshots and pieces of advice. date: 2022-11-21 modified: 2022-12-01 --- # Location finder in toujou: Manual, sample view, pieces of advice 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Element library](https://www.toujou.de/service/element-library/) 4. [Widgets](https://www.toujou.de/service/element-library/widgets/) 5. [Location Finder](https://www.toujou.de/service/element-library/widgets/location-finder/) Location finder =============== The location finder allows you to display various predefined markers on a map on the website. The toujou element can be integrated on any TYPO3 page and is based on data from Mapbox which helps you to avoid data protection issues with Google. [Sample view](#c1014494) [Manual](#c1014496) [Pieces of advice](#c1014499) --- Sample view ----------- [ ![](https://www.toujou.de/_assets/processed/qLCobhkLiT9BgS9g5D5aen4EtnY4Unq83z5esaqJgR8/q:85/w:433/h:261/fn:Y3NtX2xvY2F0aW9uZmluZGVyX2F1Zl90b3Vqb3VfcGFydG5lcl81NDliYjQ3MGE5:t/cb:4c6ba4827d226d2b48800bd15193c118d0a6ea4b/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMTJfTG9jYXRpb25maW5kZXIvbG9jYXRpb25maW5kZXJfYXVmX3RvdWpvdV9wYXJ0bmVyLmpwZw) Sample view of the element location finder (Screenshot: toujou.com/partner) ](https://www.toujou.de/partners/) --- Manual -------- The location finder uses information from the [local business page](https://www.toujou.de/service/tutorials/pages-navigation/local-business-page/) for the information of the locations. Therefore, you have to first create a local business page for all desired locations. [ ![](https://www.toujou.de/_assets/processed/FMKT-iUldnuvNBrdUj5f0Oou5zwUm3M5eE7uWTac-qM/q:85/c:1351.1111111111:760:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX2xvY2F0aW9uLWZpbmRlci1zdGVwLTFfMjU5ODU4MjE5ZQ:t/cb:412468706ab8adb4abeffb4474b450bb47cdba15/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMTJfTG9jYXRpb25maW5kZXIvbG9jYXRpb24tZmluZGVyLXN0ZXAtMS5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/12_Locationfinder/location-finder-step-1.png) ### Create the element - After clicking +Content in the content area of your page, the element wizard will appear automatically**.** Click on the **Widgets** tab and then select the **Location finder.** [ ![](https://www.toujou.de/_assets/processed/VUjhBbHQmfvAuz8wPstPrsZtv4KJBK_w2XX4Mf4mgao/q:85/c:1351.1111111111:760:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX2xvY2F0aW9uLWZpbmRlci1zdGVwLTJfMGM1MDdmOWIxYw:t/cb:baa8dadc4d77736b27cc5833ed3ab2590b0f1a7d/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMTJfTG9jYXRpb25maW5kZXIvbG9jYXRpb24tZmluZGVyLXN0ZXAtMi5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/12_Locationfinder/location-finder-step-2.png) ### Define the map section - To define a map section that will be displayed when the page is loaded for the first time you have to enter the coordinates in the *Initial Map Bounds* area within the *Content* tab. [ ![](https://www.toujou.de/_assets/processed/QtMCfdeyoftsRRRvTboKDhZxKoJjdM7GoF12KTVZ0Gs/q:85/c:1351.1111111111:760:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX2xvY2F0aW9uLWZpbmRlci1zdGVwLTNfMjhkNzlkMTljMw:t/cb:5963714db24acbd6e799bd20fffe4ebfa958c976/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMTJfTG9jYXRpb25maW5kZXIvbG9jYXRpb24tZmluZGVyLXN0ZXAtMy5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/12_Locationfinder/location-finder-step-3.png) ### Choose detail options - In the area *Details to show* you can define the location information that will be displayed. Your options are: images, branch code, description, address, phone and type. Make sure that the corresponding data is stored in the [local business pages](https://www.toujou.de/service/tutorials/pages-navigation/local-business-page/#c1014503). [ ![](https://www.toujou.de/_assets/processed/g8RdmrkAbthrip82qbdadWtVlCrZ2Ykx8uigLWdKo9g/q:85/c:1920:1080:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX2xvY2F0aW9uLWZpbmRlci1zdGVwLTRfZTFhYWUzZjlkOA:t/cb:be345a07a139308099b62ff106e3bf7b698ceb77/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMTJfTG9jYXRpb25maW5kZXIvbG9jYXRpb24tZmluZGVyLXN0ZXAtNC5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/12_Locationfinder/location-finder-step-4.png) ### Show selected pages - If you don't want all local business pages displayed in your location finder, click the folder button in the area *Pages.* - Then select the relevant page(s) by clicking on them individually. All local business pages listed in the page tree of the hierarchy level below will be captured immediately. - To include only certain hierarchy levels in the page tree, select the number of levels under *Recursive*. --- Pieces of advice ------------------ **toujou is based on TYPO3 and anyone familiar with TYPO3 knows that there are many different options to use to reach your desired results. We would like to point out important information and little tricks that can assist you when you’re creating and editing your website.** **Worth noting**: The location finder can be integrated on every page of your website. The information of the respective locations are displayed depending on the map section, which can be zoomed with + and -. The location finder is based on the data and the visual appearance of Mapbox. If you would like to change the design of the standard settings, please contact us by [email](mailto:service@toujou.de) or [phone](tel:+4991123980870) for any customization. Please note also that the first 25,000 monthly views are free of charge – a limit that most website operators usually do not exceed. In order for the locations to be displayed in the location finder, please make sure that the controller for »Page visible« and »Page enabled in menu« are switched to green in the respective [page properties](https://www.toujou.de/service/tutorials/page-properties/) of the local business page in the *Access* tab. **Responsive Design**: For mobile devices (width > 640px) the details of the business pages will be displayed below the map. --- Linked tutorials ---------------- Tutorials related to this element. [Local business page](https://www.toujou.de/service/tutorials/pages-navigation/local-business-page/) --- --- Show map Hide map 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