Beispiele anzeigen 

Willkommen

Willkommen in der SmartMaps-Dokumentation.

Für den Start benötigen Sie einen Zugangstoken. Diesen richten wir Ihnen gerne ein. Wählen Sie hierzu, abhängig von Ihrem Einsatzzweck, den für Sie passenden Tarif .

Je nach Tarif kann der Leistungsumfang von SmartMaps variieren. Die komplette Funktionsübersicht erhalten Sie hier .

Über unsere API erhalten Sie Zugriff auf die Services von SmartMaps, wie beispielsweise die Geokodierung oder das Autocomplete.

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

Im Punkt Beispiele stellen wir Ihnen einzelne Code-Ausschnitte zur Verfügung, mit denen Sie schnell und einfach eine eigene Karte erstellen oder unsere Autovervollständigung einbinden können.

Über den API-Loader lassen sich die unterschiedlichen Module der JavaScript-API auswählen. Es besteht hierbei zusätzlich die Möglichkeit, auf eine bestimme Revision zuzugreifen oder alternativ immer die aktuelle Version einer Hauptrevision zu laden.

Die ausgewählten Module können unterschiedlichen Revisionsnummern entstammen.

   Schritt für Schritt die SmartMaps-Karte einbinden

Jetzt einbinden

Initialisierung

Auf folgende Weise binden Sie die SmartMaps-API ein (der Zeilenumbruch dient der besseren Lesbarkeit):

Codebeispiel: Initialisierung SmartMaps-API

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

Für den Zugriff benötigen Sie einen partnerspezifischen Zugriffsschlüssel (Parameter-Name: apiKey). Diesen stellt Ihnen YellowMap zur Verfügung: Tarife .

Die Java-Script API funktioniert nur mit einem URL-enkodierten apiKey. Der nach der Registrierung bereitgestellte apiKey ist sofort einsatzbereit.

Beachten Sie, dass der Zugriff auf bestimmte Domains beschränkt bleibt. Die Beschränkung auf bestimmte IP-Adressen sind im Enterprise-Bereich möglich.

Module und Versionsnummern werden über den Parameter libraries festgelegt. Die einzelnen Module werden voneinander durch Komma getrennt.

Parameter

Name Beschreibung Datentyp
apiKey Zugriffsschlüssel [erforderlich] string
libraries Eine oder mehrere Programm-Bibliotheken, getrennt durch Komma [erforderlich] string
Mögliche Werte des Parameters libraries
Name Beschreibung
free-%Versionsnummer% Das Produkt mit dem Namen "free" sowie, per "-" getrennt, die Version, welche geladen werden soll.  Die Angabe der Version ist optional, sodass für den Wert "free" stets die aktuellste Version geladen wird.
enterprise-%Versionsnummer%  Das Produkt mit dem Namen "enterprise" sowie, per "-" getrennt, die Version, welche geladen werden soll.  Die Angabe der Version ist optional, sodass für den Wert "enterprise" stets die aktuellste Version geladen wird.

Einfache Kartendarstellung

In diesem Beispiel wird eine Karte in einen DIV-Container geladen. Hierbei legt die Mittelpunktkoordinate zusammen mit der Zoomstufe den Kartenausschnitt fest.

Sie können mithilfe der Maus die Karte verschieben und in sie hinein- oder aus ihr herauszoomen.

SmartMaps-Karte

Das Beispiel ist vollständig. Sie müssen lediglich den Wert für den apiKey ersetzen. Die Größe der Karte kann mittels CSS des Container-Elements (width und height) bestimmt werden. Fügen Sie den folgenden Code in den body hinzu:

Codebeispiel: Karte einzeichnen

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

Auflösung von Abhängigkeiten

Die Funktion ym.ready(options, callback) löst Abhängigkeiten auf, die für die JavaScript-Komponenten notwendig sind. Nach Abarbeitung des Callback sind sämtliche Abhängigkeiten aufgelöst und die eigentliche Kartenanwendung kann gestartet werden.

Grundsätzlich werden sämtliche Abhängigkeiten als Polyfill geladen. Sollte also eine Bibliothek, wie zum Beispiel jQuery, bereits existieren, wird diese mitgenutzt und die Bibliothek wird nicht nachgeladen.

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