Autocomplete (JSONP)

There is a new version of the autocomplete available. Please use version 5 of the autocomplete for your future projects.

SmartMaps provides auto-completion for addresses. While you start typing an address in the example below, suggestions of addresses appear, which can be transferred to the form field by selection.

The auto-completion interface can be accessed via JSONP or via protobuf.

This example is complete; you can save it locally and run it in an http context. You only have to replace the value for the apiKey.

SmartMaps map

Autocomplete

Code example: autocomplete

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>Autocomplete (JSONP)</title>
</head>

<body>
  <div id="map-wrapper">
    <form class="float">
      <input id="Autocomplete" class="ym-search" type="search" placeholder="Search">
    </form>
    <div id="map" style="z-index: 0"></div>
  </div>

  <!-- SmartMaps-API -->
  <script src="https://www.yellowmap.de/api_rst/api/loader?libraries=free-3&apiKey={API_KEY}"></script>
  <script>
    ym.ready(function(modules) {

      // Define map.
      var map = ym.map("map", {
        center: ym.latLng(49.021273, 8.439316),
        zoom: 14
      });

      var geocoder = new ym.services.GeoCoder();
      geocoder.on('success', function(req, res) {
        if (res.body && res.body.features && res.body.features.length) {
          map.fitBounds(ym.geoJson(res.body.features[0]).getBounds());
        }
      });

      var autoComplete = modules.autoComplete("#Autocomplete", {
        dataType: "jsonp",
        locales: ['DE'],
        // Function is called as soon as an entry is selected from the list.
        onSelected: function(geoJson) {
          geocoder.geocode(geoJson.properties.location);
        }
      });
    });
  </script>
</body>
</html>