Use Focus GIDs

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 highlight results within a selected area defined by a GID using focus.gid parameter from Jawg Places API.

Checkout all focus options available on Jawg Places JS: JawgPlaces.FocusOptions.

The following example will return responses only from Yogyakarta, Indonesia below.

Let's try locations within the selected State:

Candi Prambanan (Temple inside and outside the area)
Gunung Merapi (Museum inside and location outside the area)

Now you can also try locations outside the state:

Wikimedia (office within the state is highlighted)

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,
        focus: {
          // GIDs as an array
          gids: ['whosonfirst:region:85672093'],
          // GIDs as a string
          // gids: 'whosonfirst:region:85672093',
          // GIDs as a function, can be changed dynamically
          // gids: () => ['whosonfirst:region:85672093'],
        },
      });
    </script>
  </body>
</html>

Tours and Tickets to Experience Temple Complex (Taman Wisata Candi Prambanan)