Show examples

Welcome

Welcome to the SmartMaps documentation.

You will need an access token to get started. We will gladly set this up for you. Choose the tariff that suits you best, depending on your purpose.

Depending on the tariff, the scope of services of SmartMaps can vary. You can get the complete function overview here .

Our API gives you access to the services of SmartMaps, such as geocoding or autocomplete.

In the lower area we give an overview of the individual functions of SmartMaps and their parameters.

In the section Examples we provide you with individual code snippets, with which you can quickly and easily create your own map or integrate our autocomplete.

The API loader allows you to select the different modules of the JavaScript API. It is also possible to access a specific revision or alternatively to always load the current version of a major revision.

The selected modules can have different revision numbers.

  Integrate the SmartMaps map step by step

Embed now

Initialization

The following is how to include the SmartMaps API (the line break is for better readability)

Code example: Initialization SmartMaps API

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

For the access you need a partner specific access key (parameter name: apiKey). This key is provided by YellowMap: tariffs .

The JavaScript API can only be accessed with the URL encoded apiKey. The apiKey provided after registration is ready for immediate usage.

Please note that access is restricted to certain domains. Restriction to certain IP addresses is possible in the Enterprise area.

Modules and version numbers are defined by the parameter libraries. The individual modules are separated by commas.

Parameters

Name Description Data type
apiKey access key [required] string
libraries One or more program libraries, separated by comma [required] string

Possible values of the parameter  libraries

Name Description
free-%Versionsnummer% The product with the name "free" and, separated by "-", the version to be loaded.  Specifying the version is optional, so that for the value "free" always the latest version is loaded.
enterprise-%Versionsnummer%  The product with the name "enterprise" and, separated by "-", the version to be loaded.  Specifying the version is optional, so that for the value "enterprise" always the latest version is loaded.

Simple map display

In this example a map is loaded into a DIV container. The center coordinate together with the zoom level defines the map section.

You can use the mouse to move the map and zoom in or out.

SmartMaps-map

The example is complete. You only have to replace the value for the apiKey. The size of the map can be determined by CSS of the container element (width and height). Add the following code to the body:

Code example: Draw in map

<div id="map-wrapper">
    <!-- Vordefiniertes DIV-Element, in das die Karte geladen wird. -->
    <div id="map" style="width: 500px; height: 300px;"></div>
</div>

<!-- SmartMaps API -->
<!-- Hier muss Ihr persönlicher API-Key integriert werden -->
<script src="https://www.yellowmap.de/api_rst/api/loader?libraries=free-3&apiKey={API_KEY}"></script>

<script>
    ym.ready(function(modules) {
      var map = ym.map("map", {
	// Geographische Länge und Breite definieren.
        center: ym.latLng(50.095685, 8.690445),
	// Zoomstufe festlegen.
        zoom: 12
      });
      window.map = map;
    });
</script>

Resolution of dependencies

The ym.ready(options, callback) function resolves dependencies that are necessary for the JavaScript components. After processing the callback all dependencies are resolved and the actual map application can be started.

Basically all dependencies are loaded as polyfill. If a library, such as jQuery, already exists, it is used and the library is not reloaded.

After calling ym.ready() the geographic objects are available in the namespace ym.modules.provider.