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
Image

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> 

Karte erfolgreich eingebunden!

Ihre SmartMaps-Karte

Wie geht es nun weiter? Sie entscheiden!


Image
Lassen Sie sich unterschiedliche Marker auf der Karte anzeigen.
Image
Zeichnen Sie ohne Probleme GeoJSON-Objekte auf der Karte.
Image
Die SmartMaps-API ermöglicht Ihnen Varianten fortgeschrittener Routenberechnung. 
Image
Wechseln Sie jederzeit flexibel zwischen verschiedenen Darstellungsschichten
Image
SmartMaps ermöglicht Ihnen die Geokodierung von Adressen weltweit.
Image
Sie können auf der Karte eine oder mehrere administrative Grenzen einzeichnen.