Geocoding control standalone vanilla JS

This tutorial demonstrates how to search places usign the standalone MapTiler Geocoding Control, and shows both the JSON response from the Geocoding API and the selected list item.

This example doesn’t use a map. To use the control on a map, you can see code examples of how to use the Geocoding control with different map libraries and Javascript frameworks.


npm install --save @maptiler/geocoding-control

main.js

import '@maptiler/geocoding-control/';

const geocodingControl = document.querySelector("maptiler-geocoder");
//Change the apikey attribute of the web component to load your API key from an environment variable or similar.
//const apiKey = "YOUR_MAPTILER_API_KEY_HERE";
//geocodingControl.apiKey = apiKey;

geocodingControl.addEventListener("response", (e) => {
  document.getElementById("results").innerHTML =
    e.detail ? JSON.stringify(e.detail, null, 2) : "";
});

geocodingControl.addEventListener("pick", (e) => {
  document.getElementById("results").innerHTML =
    e.detail ? JSON.stringify(e.detail, null, 2) : "";
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Geocoding how to search places</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="search-container">
    <maptiler-geocoder apiKey="YOUR_MAPTILER_API_KEY_HERE"></maptiler-geocoder>
  </div>
  <pre id="results"></pre>
  <script type="module" src="./main.js"></script>
</body>
</html>

style.css

#results {
  position: absolute;
  top: 48px;
  bottom: 0;
  left: 8px;
  right: 8px;
  overflow: auto;
  background: #E4ECFF;
  font-size: 0.85em;
  border-radius: 6px;
  box-shadow: 0px 15px 68px rgba(51, 51, 89, 0.15);
  padding: 8px;
}

#search-container {
  position: absolute;
  right: 48px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Geocoding how to search places</title>
  <script
    src="https://cdn.maptiler.com/maptiler-geocoding-control/v3.0.0/index.umd.js"></script>
  <style>
    #results {
      position: absolute;
      top: 48px;
      bottom: 0;
      left: 8px;
      right: 8px;
      overflow: auto;
      background: #E4ECFF;
      font-size: 0.85em;
      border-radius: 6px;
      box-shadow: 0px 15px 68px rgba(51, 51, 89, 0.15);
      padding: 8px;
    }

    #search-container {
      position: absolute;
      right: 48px;
    }
  </style>
</head>

<body>
  <div id="search-container">
    <maptiler-geocoder apiKey="YOUR_MAPTILER_API_KEY_HERE"></maptiler-geocoder>
  </div>
  <pre id="results"></pre>
  <script type="module">
    const geocodingControl = document.querySelector("maptiler-geocoder");
    //Change the apikey attribute of the web component to load your API key from an environment variable or similar.
    //const apiKey = "YOUR_MAPTILER_API_KEY_HERE";
    //geocodingControl.apiKey = apiKey;

    geocodingControl.addEventListener("response", (e) => {
      document.getElementById("results").innerHTML =
        e.detail ? JSON.stringify(e.detail, null, 2) : "";
    });

    geocodingControl.addEventListener("pick", (e) => {
      document.getElementById("results").innerHTML =
        e.detail ? JSON.stringify(e.detail, null, 2) : "";
    });
  </script>
</body>

</html>