SmartMaps JS API v3 ist veraltet

Bitte beachten Sie, dass SmartMaps JS API v3 veraltet ist und nicht mehr weiterentwickelt wird. Anstatt Ihre Projekte auf SmartMaps JS SDK v5 zu aktualisieren, empfehlen wir Ihnen, für Ihre Projekte einen Wechsel zu SmartMaps GL in Betracht zu ziehen. SmartMaps GL bietet eine leistungsstarke und flexible Lösung für das Rendering von Karten und die Visualisierung von Standortdaten und bietet im Vergleich zu den älteren Versionen eine bessere Performance und mehr Anpassungsmöglichkeiten.

Willkommen zur SmartMaps-Dokumentation.

Sie benötigen einen API-Key, um zu starten. Wählen Sie den Tarif, der Ihrem Zweck am besten entspricht.

Je nach Tarif kann der Leistungsumfang von SmartMaps variieren. Den vollständigen Funktionsüberblick finden Sie hier.

Unsere API gibt Ihnen Zugriff auf die Dienste von SmartMaps, wie zum Beispiel Geocoding oder Autocomplete.

Im unteren Bereich geben wir einen Überblick über die einzelnen Funktionen von SmartMaps und ihre Parameter.

Im Abschnitt Beispiele stellen wir Ihnen einzelne Codeschnipsel zur Verfügung, mit denen Sie schnell und einfach Ihre eigene Karte erstellen oder unser Autocomplete integrieren können.

Der API-Loader ermöglicht Ihnen die Auswahl der verschiedenen Module der JavaScript API. Es ist auch möglich, auf eine bestimmte Revision zuzugreifen oder alternativ immer die aktuelle Version einer Hauptrevision zu laden.

Die ausgewählten Module können unterschiedliche Revisionsnummern haben.

Die SmartMaps-Karte Schritt für Schritt integrieren

Jetzt einbinden

Initialisierung

Im Folgenden erfahren Sie, wie Sie die SmartMaps API einbinden (der Zeilenumbruch dient der besseren Lesbarkeit):

<body>
    <script src="https://www.yellowmap.de/api_rst/api/loader/?
    apiKey=[INSERT API-KEY]&libraries=free-3"></script>
</body>

Für den Zugriff benötigen Sie einen partnerspezifischen Zugriffsschlüssel (Parametername: apiKey). Dieser Schlüssel wird von YellowMap bereitgestellt: Tarife.

Auf die JavaScript API kann nur mit dem URL-codierten apiKey zugegriffen werden. Der nach der Registrierung bereitgestellte apiKey ist sofort einsatzbereit.

Bitte beachten Sie, dass der Zugriff auf bestimmte Domains beschränkt ist. Im Enterprise-Bereich ist auch eine Beschränkung auf bestimmte IP-Adressen möglich.

Module und Versionsnummern werden über den Parameter libraries definiert. Die einzelnen Module werden durch Kommas getrennt.

Parameter

Name	Beschreibung	Datentyp
apiKey	Zugriffsschlüssel [erforderlich]	string
libraries	Eine oder mehrere Programmbibliotheken, durch Komma getrennt [erforderlich]	string

Mögliche Werte des Parameters `libraries`

Name	Beschreibung
free-%Versionsnummer%	Das Produkt mit dem Namen „free" und, getrennt durch „-", die zu ladende Version. Die Angabe der Version ist optional, sodass für den Wert „free" immer die neueste Version geladen wird.
enterprise-%Versionsnummer%	Das Produkt mit dem Namen „enterprise" und, getrennt durch „-", die zu ladende Version. Die Angabe der Version ist optional, sodass für den Wert „enterprise" immer die neueste Version geladen wird.

Einfache Kartenanzeige

In diesem Beispiel wird eine Karte in einen DIV-Container geladen. Die Mittelpunktkoordinate zusammen mit der Zoomstufe definiert den Kartenausschnitt.

Sie können die Karte mit der Maus verschieben sowie hinein- oder herauszoomen.

Das Beispiel ist vollständig. Sie müssen nur den Wert für den apiKey ersetzen. Die Größe der Karte kann über CSS des Container-Elements (Breite und Höhe) bestimmt werden. Fügen Sie den folgenden Code in den Body ein:

Codebeispiel: Karte einzeichnen

<div id="map-wrapper">
    <!-- Predefined DIV element where the map will be loaded. -->
    <div id="map" style="width: 500px; height: 300px;"></div>
</div>

<!-- SmartMaps API -->
<!-- Insert your personal API key here -->
<script src="https://www.yellowmap.de/api_rst/api/loader?libraries=free-3&apiKey=[INSERT API-KEY]"></script>
<script>
    ym.ready(function(modules) {
      var map = ym.map("map", {
        // Define geographic latitude and longitude.
        center: ym.latLng(50.095685, 8.690445),
        // Set zoom level.
        zoom: 12
      });
      window.map = map;
    });
</script>

Auflösung von Abhängigkeiten

Die Funktion ym.ready(options, callback) löst Abhängigkeiten auf, die für die JavaScript-Komponenten erforderlich sind. Nach der Verarbeitung des Callbacks sind alle Abhängigkeiten aufgelöst, und die eigentliche Kartenanwendung kann gestartet werden.

Grundsätzlich werden alle Abhängigkeiten als Polyfill geladen. Wenn eine Bibliothek, wie z. B. jQuery, bereits vorhanden ist, wird diese verwendet, und die Bibliothek wird nicht erneut geladen.

Nach dem Aufruf von ym.ready() stehen die geografischen Objekte im Namespace ym.modules.provider zur Verfügung.