Skip to content

SmartMaps JS API v3 is deprecated

Please note that SmartMaps JS API v3 is deprecated and no longer being developed. Instead of upgrading your projects to SmartMaps JS SDK v5, we recommend considering a switch to SmartMaps GL for yout projects. SmartMaps GL offers a powerful and flexible solution for map rendering and location data visualization, providing better performance and customization options compared to the older versions.

Welcome to the SmartMaps documentation.

You will need an api key to get started. 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):

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

For 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.

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.