SmartMaps-Karte in Ihrer Webseite einbinden

... und das


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
Bildschirmansicht zweier exemplarischer Filialsuchen. Links die Filialsuche der Postbank mit mehreren Standortmarkierungen. Rechts die Immobilienseite der Sparkasse mit einem hervorgehobenen Einzugsgebiet um eine Immobilie.

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://api.yellowmaps.eu/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 erledigen:

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!


SmartMaps Kartenausschnitt des CAS-Campus mit einer Markierung für einen Standort.
Lassen Sie sich unterschiedliche Marker auf der Karte anzeigen.
SmartMaps Kartenausschnitt von Frankfurt am Main mit einem eingezeichneten GeoJSON-Objekt.
Zeichnen Sie ohne Probleme GeoJSON-Objekte auf der Karte.
SmartMaps Kartenausschnitt von Karlsruhe mit zwei markierten Standorten als Start- und Endpunkt. Eine gestrichelte Linie zeigt die Route zwischen ihnen.
Die SmartMaps-API ermöglicht Ihnen Varianten fortgeschrittener Routenberechnung. 
SmartMaps Kartenausschnitt von Frankfurt am Main mit zwei markierten Standorten. Eine Legende ermöglicht das Ein- und Ausblenden der dargestellten Standorte.
Wechseln Sie jederzeit flexibel zwischen verschiedenen Darstellungsschichten
SmartMaps Kartenausschnitt des CAS-Campus mit einer Markierung für einen geokodierten Standort. Ein Anzeigefenster zeigt die Adresse des Standorts.
SmartMaps ermöglicht Ihnen die Geokodierung von Adressen weltweit.
SmartMaps Kartenausschnitt von Süddeutschland mit eingezeichneter Grenze des Bundeslandes Baden-Württemberg.
Sie können auf der Karte eine oder mehrere administrative Grenzen einzeichnen.