Use boundary countries (for France, Belgium, Luxembourg and Switzerland)

Estimated reading time: 1 minute

This example uses JawgPlaces.Input to initialize a Jawg Places Input inside an HTML element on a webpage. It will allow you to search in selected countries using boundary.country parameter from Jawg Places API.

Checkout all boundary options available on Jawg Places JS: JawgPlaces.BoudaryOptions.

The following example will return responses only from France, Belgium, Luxembourg and Switzerland.

Let's try some famous locations:

Paris (France)
Bruxelles (Belgium)
Luxembourg (Luxembourg)
Bern (Switzerland)

Now you can also try locations from other countries:

New York (this one will return New Yorker shops instead of New York, USA)
London (this one will return venues with London in the name instead of London, UK)

The value <YOUR_ACCESS_TOKEN> in the <script> tag must be replaced by your own access token from the Jawg Lab.

View on GitHub

<html>
  <head>
    <script src="https://api.jawg.io/libraries/jawg-places@latest/jawg-places.js?access-token=<YOUR_ACCESS_TOKEN>"></script>
  </head>
  <body>
    <input id="my-input" type="text" placeholder="Search" />
    <script>
      new JawgPlaces.Input({
        input: '#my-input',
        searchOnTyping: true,
        boundary: {
          // Countries as an array
          countries: ['fra', 'be', 'lu', 'ch'],
          // Countries as a string
          // countries: 'fra,be,lu,ch',
          // Countries as a function, can be changed dynamically
          // countries: () => ['fra', 'be', 'lu', 'ch'],
        },
      });
    </script>
  </body>
</html>