The map-wrapper contains another div element with the class geocoder-form. In this element the user interface for the input of address information is implemented. The simple geocoding of addresses is a form (ID=location-form), which queries the postal code, the city and the street of the address to be geocoded. The input field for entering the country of the address is set to hidden in this case and Germany by default.

      <form id="location-form">
        <fieldset>
          <legend>Geocode address</legend>
          <label>
              Postleitzahl:
              <input type="text" name="zip" value="76133" placeholder="zip code">
            </label>
          <label>
              Stadt:
              <input type="text" name="city" value="Karlsruhe" placeholder="city">
            </label>
          <label>
              Straße:
              <input type="text" name="street" value="Wattkopfstr" placeholder="street">
            </label>
          <input type="hidden" name="country" value="DE">
          <button type="submit">send</button>
        </fieldset>
      </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 realize the functionality of geocoding, the integration of JavaScript code is necessary. As in this example, this code can be included in the HTML script using a script-Tags or in a separate .js file. All variables and functions are implemented in the ym.ready method, because this method resolves dependencies to start the actual map application.

ym.ready(function(modules) {

    ...

});

To manage the address form the variable geocodingForm is defined. This variable is assigned the form for the input of addresses by the ID location-form. To display the geocoding on the map a variable named layerGroup is created. This variable represents a layer group, which is used to manage the SmartMaps map and its objects by layers.

    ym.ready(function(modules) {

      // Accessing the address form. 
      var geocodingForm = document.getElementById('location-form');
      // Define Layer Group.
      var layerGroup = ym.layerGroup();

An object of the class ym.map is created to enable the SmartMaps map to be displayed. Parameters are 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.). To continue managing the map in code, the object is stored in a variable map gelagert. The previously created layer group will be added to the map afterwards.

      // Draw in map.
      var map = ym.map("map", {
        center: ym.latLng(49.021273, 8.439316),
        zoom: 14
      });
      // Drawing a Layer Group.
      layerGroup.addTo(map);

A function is defined for processing the form input of the user. This function reads and geocodes the address input after the user submits the form location-form.

      geocodingForm.onsubmit = function(e) {
        e.preventDefault();
        var inputs = document.querySelectorAll('#location-form input');
        var zip = inputs[0].value;
        var city = inputs[1].value;
        var street = inputs[2].value;
        var country = inputs[3].value;
        // Geocoding address data.
        modules.geocode({
          "country": country,
          "district": "",
          "zip": zip,
          "city": city,
          "cityAddOn": "",
          "cityPart": "",
          "street": street,
          "houseNo": "",
          "singleSlot": ""
        });
      };

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 geo-coding ('success') a marker is set at the geo-coded address on the map, which shows a popup window with the address data when clicked. The marker is created using GeoJSON and inserted as a layer in the SmartMaps map.

      ym.services.geoCoder.on('success', function(req, res) {
        // Delete old data from the card.
        layerGroup.clearLayers();
        var geoJson = ym.geoJson(res.body, {
          // Draw markers for each entry.
          onEachFeature: function(feature, layer) {
            layer.setIcon(ym.provider.Icon.Default());
            var popUpContent = "";
            if (feature.properties.street) {
              popUpContent += feature.properties.street + ", "
            }
            if (feature.properties.zip) {
              popUpContent += feature.properties.zip + " "
            }
            if (feature.properties.city) {
              popUpContent += feature.properties.city + " "
            }
            if (feature.properties.cityPart) {
              popUpContent += feature.properties.cityPart
            }
            // Show address data in popup.
            layer.bindPopup(popUpContent);
          }
        });
        // Optimize map section for result set.
        map.fitBounds(geoJson.getBounds());
        layerGroup.addLayer(geoJson);
      });

In case of an unsuccessful geocoding ('error') an entry is written to the console.

      ym.services.geoCoder.on('error', function(req, res, errorType) {
        console.log(arguments);
      });

The geocoding is now successfully integrated.