Use Boundary GIDs
Estimated reading time: 1 minuteThis example uses JawgPlaces.Input
to initialize a Jawg Places Input inside an HTML element on a webpage. It will allow you to search within a selected area defined by a GID using boundary.gid
parameter from Jawg Places API.
Checkout all boundary
options available on Jawg Places JS: JawgPlaces.BoudaryOptions
.
The following example will return responses only from Yogyakarta, Indonesia below.
Let's try locations within the selected State:
Candi Prambanan (Temple)
Gunung Merapi (Museum)
Now you can also try locations outside the state:
New York (this will not return New York, USA)
London (this will return London, UK)
Wikimedia (only offices within the state are returned)
The value <YOUR_ACCESS_TOKEN>
in the <script>
tag must be replaced by your own access token from the Jawg Lab.
<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: {
// 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>