Autocomplete (JSONP)

Es ist eine aktuellere Version des Autocompletes verfügbar. Bitte benutzen Sie für Ihre zukünftigen Projekte die Version 5 des Autocompletes.

SmartMaps stellt ein Autovervollständigung für Adressen zur Verfügung. Während Sie im Beispiel unten eine Adresse einzutippen beginnen, erscheinen Vorschläge von Adressen, die durch Auswahl in das Formularfeld übernommen werden können.

Die Autovervollständigungsschnittstelle kann sowohl per JSONP als auch per Protobuf angesprochen werden.

Dieses Beispiel ist vollständig; Sie können es lokal speichern und in einem http-Kontext ausführen. Sie müssen lediglich den Wert für den apiKey ersetzen.

SmartMaps-Karte

Autovervollständigung

Codebeispiel: Layer ein- und ausblenden

<!DOCTYPE html>
<html>

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

<body>
  <div id="map-wrapper">
    <form class="float">
      <input id="Autocomplete" class="ym-search" type="search" placeholder="Suche">
    </form>
    <div id="map" style="z-index:0; width:100%; height: 600px"></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) {

      // Karte definieren.
      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'],
        // Funktion wird aufgerufen, sobald ein Eintrag aus der Liste ausgewählt wurde.
        onSelected: function(geoJson) {
          geocoder.geocode(geoJson.properties.location);
        }
      });
    });
  </script>
</body>
</html>