So erstellen Sie eine Karte mit Ladesäulen für Ihre Internetseite

So geht es

Wichtig zu wissen: Ein paar grundlegende Kenntnisse in HTML und Webseiten bauen können an dieser Stelle nicht schaden! Je mehr Kenntnisse Sie mitbringen – desto einleuchtender sind die einzelnen Schritte 😉

  • 1. Kartenausschnitt festlegen

    Direkt auf dieser Seite
  • 2. Domain angeben

    Geben Sie die Domain an, unter der die Karte laufen soll.
  • 3. Nutzungsbedingungen akzeptieren

    Die Karten sind kostenlos - aber natürlich gibt es Nutzungsbedingungen.

Schritt 1: Kartenausschnitt festlegen

In unserem Karteneditor können Sie eine Adresse eingeben oder die Karte verschieben. Mit der Zoom-Funktion legen Sie die Ansichtsstufe der Karte fest. Die Breite und Höhe der Karte können Sie auch in dieser Eingabemaske festlegen.

Pro-Tipp: Das können Sie – entsprechende Kenntnisse vorausgesetzt – natürlich auch direkt im erstellten Quellcode anpassen!

Wichtig zu wissen: Wenn Sie eine Adresse eingeben wird diese als Stecknadel auf der Karte angezeigt. Diese Stecknadel erscheint später NICHT auf der Karte. Warum nicht? Weil es aus Nutzersicht zunächst nicht einleuchtend ist, warum eine bestimmte Adresse als Stecknadel angezeigt wird: Was soll das bedeuten, um wessen Adresse handelt es sich etc.
Natürlich ist es möglich, eine oder auch mehrere Standorte auf der Karte anzuzeigen. Aber das ist dann eine der zahlreichen Extrafunktionen.

Zum Aktivieren der Karte bitte einmal klicken!

Und so funktioniert es:
1. Standortinformationen eingeben | 2. Kartenausschnitt beliebig anpassen | 3. Auf „Jetzt den Kartenausschnitt festlegen“ klicken | 4. Vorschau Ihrer Karte anschauen






Pixel
Zufrieden mit dem Kartenausschnitt?

Dann klicken Sie hier für den nächsten Schritt!

Ihre Domain

Schritt 2

Geben Sie die Domain an, unter der die Karte laufen soll.

Der Schlüssel schützt uns als Betreiber vor unrechtmäßiger Nutzung der  Daten.

Das soll die Seite sein, auf der die Karte angezeigt wird?

Super, dann fehlt jetzt nur noch ein Schritt - klicken Sie hier!

Ihr E-Mail-Adresse

optional

Und was ist, wenn es Updates oder Neuigkeiten gibt?

Zum Einbinden der Karte brauchen wir keine E-Mail Adresse von Ihnen. Aber damit wir Sie auch über Updates und Neuigkeiten zu unseren Karten informieren können, empfehlen wir Ihnen die Anmeldung zu unserem Newsletter.

Und so gehts: E-Mail Adresse eintragen und informiert bleiben.


› Nein danke, heute nicht!

Ihre Vorteile im Überblick:

  • Sie müssen sich nicht mehr aktiv informieren, wir erledigen die Arbeit für Sie
  • Sie müssen sich um nichts kümmern
  • jederzeit abbestellbar
  • es erwartet Sie KEIN täglicher Spam, versprochen
Der Quellcode

Schritt 3

Zur Erläuterung: Die Karte wird per JavaScript in das div-Element „emobilitycanvas“ geschrieben. Die Abmessungen des Elements können Sie komplett selber gestalten. Die Angaben im aufrufenden JavaScript zu latitude, longitude und radius lassen sich individuell anpassen. Dazu nutzen Sie unseren Karteneditor.


Fragen zur Einbindung

Es gibt doch insgesamt mehr Ladesäulen als das derzeit auf Eurer Karte zu sehen ist - was ist mit dem Rest?

Wir starten zunächst mit den Daten von OpenStreeetMap, sind aber parallel dazu in Gesprächen mit weiteren Datenlieferanten. Wir müssen ja auch erstmal sehen, wie die Akzeptanz des Portals ist. Für uns steht fest, dass wir die Nutzung der Karten kostenlos anbieten wollen - deshalb müsse wir auch zusehen, dass wir unsere Anfangsinvestitionen minimieren. Klingt einleuchtend, oder?


Es fehlen Ladesäulen auf der Karte - wie kann ich die hinzufügen?

Das Datenmaterial unserer Karten kommt von OpenStreetMap. Wenn Sie dort registriert sind, können Sie weitere Ladesäulen erfassen und zur Verfügung stellen. Der Datenbestand bei OSM wird ca. alle vier Wochen aktualisiert.


Ich habe alles korrekt eingegeben und auf meiner Seite eingefügt. Aber die Karten werden mir nicht angezeigt - was mache ich falsch?

Das lässt sich aus der Ferne immer schwer beurteilen. Aber häufige Fehlerquellen sind z.B.:

  • Der Key für die Karten ist noch nicht/nicht mehr gültig
  • Sie haben den Copyright-Hinweis verändert
  • Das Laden externer Skripte wird unterbunden
  • Sonstwas – dann nutzen Sie bitte unser Kontaktformular


Ich möchte die Karten mit meinem Fahrzeugbestand kombinieren. Wie kann ich die Funktionen der Karten erweitern?

Dazu gibt es eine umfangreiche Dokumentation der Kartentechnologie, die unser Partner 123map zur Verfügung stellt. Wichtig zu wissen: In der kostenlosen Variante der Karten sind diese Optionen nicht verfügbar. Aber wenn Sie beispielsweise mal auf www.flosm.de vorbeischauen, erkennen Sie, welche weiteren Datenschätze die Kollegen zur Verfügung stellen - und Sie haben möglicherweise ganz konkrete Wünsche, wie diese Schätze genutzt werden können.


Warum werden mir die Filteroptionen für die Steckertypen nicht angezeigt?

In der kostenlosen Version der Karten gibt es diese Option nicht. Um diese Funktion nutzen zu können brauchen Sie Programmierkenntnisse oder einen Entwickler mit entsprechenden Kenntnissen. Das ist keine Raketentechnik in der Umsetzung. Aber definitiv zu viel, um das als Online-Generator zu erstellen. Zumal wir uns gut vorstellen können, dass die Anwendungsfälle dermaßen verschieden sein können, dass wir das gar nicht alles abdecken könnten. Denken Sie nur mal an folgendes: Die Karten sollen auf den Seiten eines Autohauses eingebunden werden. Aber dieses Autohaus führt keine Autos der Marke Tesla. Welchen Grund sollte das Autohaus also haben, Ladestationen für diese Marke anzuzeigen ...

Wir werden in nächster Zeit ein kurzes "So können Sie das mit den Filtern auf Ihren Karten einbinden" Tutorial verfassen. Für weitere individuelle Anpassungen der Karten nutzen Sie bitte das Kontaktformular.


Hier erstellen Sie eine Karte mit Ladesäulen für Ihre Internetseite

Rufen Sie die Seite bitte auf einem Desktop auf

Um die Karte mit Ladesäulen auf Ihrer Website einbinden zu können, rufen Sie die Seite bitte über die Desktop-Ansicht auf.

Wichtig zu wissen: Ein paar grundlegende Kenntnisse in HTML und Webseiten bauen können an dieser Stelle nicht schaden! Je mehr Kenntnisse Sie mitbringen – desto einleuchtender sind die einzelnen Schritte!

Also: bis gleich 😉