SmartMaps-Karte in Ihrer Webseite einbinden

SmartMaps ist

Um SmartMaps in Ihre bestehende Systemlandschaft einzubinden, sind keine aufwändigen Anpassungen notwendig. Sie erhalten von uns Ihren individuellen API-Key, um die Kartenplattform nahtlos in Ihre vorhandene Anwendung zu integrieren.

Voller Funktionsumfang: Geokodierung, Routing, Adresssuche
Einfache Einbindung innerhalb weniger Minuten
Nutzerfreundliches und übersichtliches Design
Volle Kartenfunktionalität

Schritt-für-Schritt Anleitung: Karte einbinden

Ihr persönliches Tutorial

Sie können zunächst unser Tutorial starten oder Ihren SmartMaps-Key direkt unterhalb des Videos einbinden und Ihren persönlichen Code generieren lassen.

SmartMaps-API einbinden

Für den Zugriff benötigen Sie einen partnerspezifischen Zugriffsschlüssel (Parameter-Name: apiKey). Registrieren Sie sich hierfür auf smartmaps.net und binden Sie anschließend im Quellcode Ihrer Webseite die SmartMaps-API ein (der Zeilenumbruch dient der besseren Lesbarkeit):

<body> 

    <script src="https://www.yellowmap.de/api_rst/api/loader/?

    apiKey={API_KEY}&libraries=free-3"></script> 

</body>

Hinweis: Der API-Key muss für die Nutzung in HTML-Code encodiert werden. Dies können Sie hier direkt durchführen:

Encodierter API-Key:

Geben Sie im obigen Feld Ihren API-Key ein

SmartMaps-Karte einbinden

Fügen Sie für das Einbinden Ihrer einfachen SmartMaps-Karte den folgenden Code in den body -Tag Ihrer Webseite hinzu:

<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önliches API-Key integriert werden -->
<script src="https://www.yellowmap.de/api_rst/api/loader?libraries=free-3&apiKey={Ihr 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>