IFrame Code erhalten #
Der iframe code für die Karte wird über das KSC generiert. Zuerst muss unter den Produkten das Produkt 1.5. city-map.de Module – Gezielt werben in der Region! > GM4 – Routenplaner / Anfahrtsskizze mit Druckfunktion (Info) eingerichtet werden. Dann kann im KSC unter dem Punkt „Routenplaner“ der Code von dem interaktiven Kartenausschnitt kopiert werden.
Karte in Elementor einbinden #
In Elementor kann nun in das Widget HTML der Code vom iFrame eingefügt werden. Unter „Erweitert“ muss als ID und als Klasse gmap vergeben werden.
Lock Button erstellen #
Für den Button, um die Karte zu fixieren bzw frei zu bewegen kommt unter das Widget des HTML Absatzes ein Button Widget. Folgende Einstellungen müssen vorgenommen werden:
Die Farbe kann hierbei zur Wunschfarbe geändert werden.
Wichtig ist noch, dass der Button die ID gmapbtn erhält und die Position auf absolut eingestellt wird. die Breite auf Individuell und die Ausrichtung anpassen:
Custom JS und Custom CSS #
In dem Plugin „Individuelles CSS und JS“ müssen nun folgende Dateien angelegt werden:
JS Code #
jQuery(document).ready(function() {
jQuery("#gmapbtn").click(function () {
var $_GMAPBTNICON = jQuery('#gmapbtn SPAN.elementor-button-icon I');
jQuery('#gmap').toggleClass('usemap');
jQuery('#gmapbtn').toggleClass('usemap');
if(jQuery('#gmapbtn').hasClass('usemap')) {
$_GMAPBTNICON.removeClass('fa-lock');
$_GMAPBTNICON.addClass('fa-lock-open');
} else {
$_GMAPBTNICON.removeClass('fa-lock-open');
$_GMAPBTNICON.addClass('fa-lock');
}
});
});
CSS Code #
#gmap.usemap iframe {
pointer-events: auto;
}
.gmap iframe {
height: 100vh; // Höhe der Karte
border: none;
position: absolute;
pointer-events: none;
}
@media screen and (max-width: 1024px) {
.gmap iframe {
height: 450px !important;
position: relative;
}
}
@media screen and (max-width: 392px) {
.gmap iframe {
height: 200px !important;
}
}
#gmapbtn .elementor-button {
cursor: pointer;
}