Autocomplete

Autocomplete provides a list of locations for selection based on the input of an address or a part of an address. This list is dynamically changed depending on the input.

Context-sensitive Autocomplete

By using the context-sensitive auto-complete you increase the relevance of the search hits found in the respective map section. The function weights the local hits in the map section so that they appear first in the hit list. This allows your users to get the desired result even faster. Of course, hits outside the map section will still be found.

To use this function, you simply have to define your own coordinate rectangle. Alternatively, you can also use your SmartMaps map as search section.

Instructions

To be able to use the autocomplete function, the module must be loaded. This is done by adding autocomplete-5 to the parameter libraries in the included JS file of the html document.

    <script
        src="https://www.yellowmap.de/api_rst/api/loader?libraries=free-3,autocomplete-5&apiKey={{API_KEY}}"></script>
    <script>

For the implementation of an autocomplete search, which geocodes found results to the SmartMaps map according to the user's wishes, a div element with the ID map-wrapper is first added to the body tag of the HTML script.

  <div id="map-wrapper">
     ...
  </div>

The map-wrapper contains a form with an input element of the type search. This input element provides the autocomplete search using a search bar in the user interface and has the ID Autocomplete.

    <form class="float">
      <input id="Autocomplete" class="ym-search" type="search" placeholder="Suche">
    </form>

To display the SmartMaps map, the map-wrapper contains an empty div-element with the ID map.  In this div-element the map is loaded at runtime. For the div-element you can set a fixed height and width for the map with the style-attribute.

    <div id="map" style="height: 400px; width: 500px;"></div>

To implement the functionality of the autocomplete search and the corresponding geocoding of the results, the integration of JavaScript code is necessary. As in this example, this code can be included in the HTML script or in a separate .js file using a script tag. All variables and functions are implemented in the ym.ready method, because this method resolves dependencies to start the actual map application.In the options pass { autocomplete: 5 } to use the new version 5 of the autocomplete.

    ym.ready({ autocomplete: 5 }, function(modules) {
...
});

To display the SmartMaps map for geocoding the Autocomplete results, an object of the class ym.map is created. The ID of the div element in which the map is to be drawn and the desired map options (start position, start zoom level, etc.) are passed as parameters. To manage the map further in code, the object is stored in a variable map.

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

For geocoding the results of the autocomplete search the methods of the class ym.services.GeoCoder() are required. To use these methods an object of the class is stored in the variable geocoder.

      var geocoder = new ym.services.GeoCoder();

To track the geocoding, an EventEmitter is used for the geoCoder class, which enables geocoding on the SmartMaps map. This enables by its on-method that a listener is added. The listener performs functions on certain events and can be used to distinguish between successful and unsuccessful geocoding. In this case the geoCoder class is already equipped with an EventEmitter and can directly access the on-method.
In case of a successful geocoding ('success') the SmartMaps map shows the area of the geocoded address.

      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());
        }
      });

The functionality of the autocomplete search is realized by an object of the class ym.modules.AutoComplete. This object is stored in the variable autoComplete. For the initialization of the object two parameters are needed: A selector, for which a jQuery object or a CSS3 selector can be passed, which points to the input field for the autocomplete (here: input element with the ID Autocomplete), and settings, in which different conditions and settings for the autocomplete search can be made.
In the following example, the Settings parameter defines that the Autocomplete search is restricted to addresses in Germany and returns JSONP in the return type. Furthermore a function is defined, which starts the corresponding geocoding as soon as the user selects an entry from the list.

      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);
        }
      });

The autocomplete search is now successfully integrated.

If you are using the old autocomplete version 3, click here. If you want to switch to the new autocomplete v5, here are the migration instructions.

HTML document

Code example: Autocomplete

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>Autocomplete</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,autocomplete-5&apiKey={{API_KEY}}"></script>
    <script>
        ym.ready({ autocomplete: 5 }, 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", {
                isoCountries: ['de'],
                // Called when a item is selected
                onSelected: function (geoJson) {
                    geocoder.geocode(geoJson.properties.location);
                }
            });
        });
    </script>
</body>

</html>