Use a custom layout with your result list

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 separate your input and geocoding results thanks to resultContainer options.

Checkout all common options available on Jawg Places JS: JawgPlaces.JawgPlacesInputOptions.

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

View on GitHub

Geocoding results

<html>
  <head>
    <script src="https://api.jawg.io/libraries/jawg-places@latest/jawg-places.js?access-token=<YOUR_ACCESS_TOKEN>"></script>
  </head>
  <body>
    <div style="width: 100%; height: 250px; display: flex; flex-direction: row">
      <div style="max-width: 50%; align-items: center; display: flex; flex: 0 0 50%; border-right: #444 solid 2px">
        <input id="my-input" type="text" placeholder="Search" />
      </div>
      <div style="min-width: 50%; flex: 0 0 50%; overflow: auto">
        <span>Geocoding results</span>
        <div id="my-result"></div>
      </div>
    </div>
    <script>
      new JawgPlaces.Input({
        input: '#my-input',
        searchOnTyping: true,
        resultContainer: '#my-result',
      });
    </script>
  </body>
</html>