Kurviger in Webseite einfügen

Other
1

Hallo,

ich habe auf einer Webseite gesehen, dass dort Kurviger als Webseite mit einer Tour integriert ist. Diese Tour kann man öffnen und in sein Kurviger übertragen. Finde ich eine tolle Sache. wie kann man das machen? Ich das eine kostenpflichtiges Future für Webseitendesigner oder wie funktioniert das? Vielen Dank.

Hier die Seite:

2
3

Leider gibt es da keine einfach schnelle Möglichkeit. Ich habe das auch mal hinterfragt und keine Lösung für mich gefunden.

4

Ich möchte nicht nur die Tour haben, sondern eine Ansicht auf der eigenen Webseite wie im Beispiel.

5

Gibt es denn eine schwere/komplizierte Lösung? :wink:

6

Siehe

1 Like
7

Ja gibt es, wenn man sich etwas mit html und Co auskennt.

Robin hat es mir mal erklärt aber ich finde es leider nicht mehr.

Ich selbst habe keine Lust über eine API usw. zu gehen. Ich hatte selbst auch gehofft, dass Kurviger eine einfache Möglichkeit bietet Touren ansprechend dargestellt in anderen Websites zu veröffentlich.

Wenn ich es mal mache, was ich aber vermeide, erstelle ich einen Screenshot von der Tour als Übersicht und hinterlege beim drauf klicken auf das Bild den Kurviger Kurzlink.

1 Like
8

Danke, auch eine gute Lösung.

9

Du meinst vermutlich die Lösung via iFrame.

@TigerThom also, wenn man ein bisschen HTML kann ist das eigentlich gar nicht so schwer. Die Einbindung von Kurviger in z.B. eine private Seite, auf der man seine eigenen Touren auflistet ist natürlich auch kostenlos.

Du brauchst dazu den Link (z.B. kurv.gr Link) von Kurviger und kopierst diesen in dein iFrame.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe

Das könnte z.B. so aussehen:

<iframe
  width="800"
  height="800"
  src="https://kurv.gr/yk3e5">
</iframe>

Mit width und height musst du rumspielen, je nachdem was für deine Webseite passt. Man kann hier auch z.B. mit % Werten und so arbeiten, da findest du aber viel Infos im Netz bzw. per KI für deinen speziellen Fall.

Wordpress und viele andere Webseiten-Systeme haben die Möglichkeit direkt im Editor ein iFrame zu platzieren.

10

Ja genau aber irgendetwas war damit und ich habe das nicht weiter genutzt.

Wenn man es responsiv haben möchte, passt dann der nachfolgende Code Robin?

<div style="position:relative; width:100%; padding-bottom:100%;">
  <iframe 
    src="https://kurv.gr/yk3e5"
    style="position:absolute; top:0; left:0; width:100%; height:100%; border:0;"
    loading="lazy"
    allowfullscreen>
  </iframe>
</div>
11

Also, ich hätte es anders gemacht. Wir verwenden bei uns im Blog z.B. folgenden Code:

<iframe loading="lazy" width="100%" height="500em;" src="https://kurviger.com/de/plan?point=50.092393%2C8.085938&point=50.035762%2C9.316953&weighting=fastest&id=1&embed=true">
</iframe>

Hinter die Kurviger URL noch das `embed=true` ist aktuell ein kleiner Geheimtrick, dass die Karte gesperrt ist beim Scrollen, das nervt gern beim Embedding. embed=true ist nicht so richtig offizielle, also das geht eventuell irgendwann nicht mehr - nur so zur Info :smiley:.

Wenn du die Karte in voller Höhe haben willst, kannst du auch bei height sowas wie 100vh probieren. Es hängt immer davon ab, was du erreichen willst und was du mit Responsive meinst.

3 Likes
12

Danke für die tolle Lösung.

1 Like