Search location widget

Follow the instructions below to embed the search location widget directly on your website. You can use a simple solution, which will create a complete markup for you; or you can use a custom solution that allows you to have an individual markup adapted to your needs.

The currently available widget languages are:

German (fallback)
French

Once you choose a search result, you are redirected to the page you include the script from.

Simple solution

To add a widget to your website, please use the below code snippet:

View demo

<div data-sng-widget-location-search></div>
<script src="https://www.schutz-vor-naturgefahren.ch/widget-location-search.js" async></script>

You can also use the following options to customize the widget behavior:

Attribute	Description
`data-geolocation="false"`	Disable the geolocation feature. The geolocation will be disabled by default if preconditions are not met, e.g. the browser has no geolocation feature, or the website context is insecure (no SSL certificate).
`data-placeholder="z.B. Musterstrasse 5, 8954 Neuheim"`	Search input placeholder.

Advanced solution

Another way to create a widget is to provide your custom markup. Please note that no CSS file is loaded in this scenario!

View demo

There are a few DOM elements that must exist for the widget to work. They have to be marked with the following attributes:

Attribute	Element type	Description
data-geolocation-button	`<button>`	Geolocation button element.
data-input-container	A block-level element (e.g., `<div>`).	Search input container element.
data-input	`<input>`	Search input element.
data-results	A block-level element (e.g., `<div>`).	Search results element.

See the example code below:

<div data-sng-widget-location-search>
    <!-- search error message will be displayed here, if any -->
    <div data-input-container>
        <button data-geolocation-button>Finde mich!</button>
        <input type="text" placeholder="z.B. Musterstrasse 5, 8954 Neuheim" data-input>
    </div>
    <div data-results></div>
</div>
<script src="https://www.schutz-vor-naturgefahren.ch/widget-location-search.js" async></script>