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 😉
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.
Und so funktioniert es:
1. Standortinformationen eingeben | 2. Kartenausschnitt beliebig anpassen | 3. Auf „Jetzt den Kartenausschnitt festlegen“ klicken | 4. Vorschau Ihrer Karte anschauen
Pixel
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.
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.
<div id="emobilitycanvas" class="nosvgcanvas123" tabindex="1" ></div>
<div id="emobilitycopy">© <a href="https://www.elektroautotanken.de/" target="_blank">elektroautotanken.de</a>, <a href="https://www.123map.de" target="_blank">123map</a></div>
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 😉