Flexibel und individuell anpassbar!

TIPP! Jsonbix interaktive Karten können überall dort genutzt werden, wo  Iframe & Javascript erlaubt sind.

Dein CMS System ist hier nicht aufgeführt? Du kannst es trotzdem versuchen. Kopiere den HTML-Code der Demodatei in deine Webseite.

Demo downloaden

Upload! Eigene Karten im Geojson-Format können mit dem Online Editor verarbeitet werden.

Lade Dir kostenlos diese Vorlage einer Geojson-Datei hier herunter. Erstelle deine eigenen Fantasiewelten mit dem JsonBix Online Editor

Geojson Vorlage

Marker! Marker, Pins, Stecknadeln machen deine interaktive Landkarte informativ und noch schöner.

Upload! Du kannst Deine eigenen Marker in dein Projekt laden. 200x200 Pixel dürfen diese maximal groß sein. Optimiere deinen Marker bevor Du ihn im Editor benutzt.Das wird die Ladezeit der Karte verbessern.

Formate: *jpg, *.png, *.gif ( animiert )

Beispiel Code - kostenlos zum testen

1. Code markieren | 2. Code kopieren | 3. Code in Ihre Webseite einfügen

<div id="jsonbix-map-14709"><iframe id="iframe-map-14709" class="iframe-map" src="https://www.jsonbix.com/wp-admin/admin-ajax.php?action=gjme_publish&p=14709&key=qa7d1sd23i" width="100%" height="90%" style=" width: 100%; height: 90%; max-width: 100%; border: none; background: transparent;" border="0" frameborder="0" allowTransparency="true"></iframe></div>
<script type="text/javascript">
(function() {
"use strict";
/* use the id of the iframe: "iframe-map-14709" */
setResponsiveMap('iframe-map-14709');
/* resize the iframe: */
function setResponsiveMap(iframeId) {
var addEvt = 'addEventListener';
var evtName = 'message';
if(!window.addEventListener) {
addEvt = 'attachEvent';
evtName = 'on'+evtName;
}
window[addEvt](evtName, function(ev) {
var iframe = document.getElementById(iframeId);
if(!iframe) return;
if(ev.source != iframe.contentWindow) return;
var data = ev.data;
if(typeof(data) == 'string') data = JSON.parse(data);
if(!data.height || !data.width) return;
var newHeight = parseInt(data.height);
if(newHeight == 0 || isNaN(newHeight)) return;
iframe.setAttribute("height", newHeight);
iframe.style.height = newHeight + "px";
}, false);
};
}());
</script>

Fügen Sie den Code dort ein wo die Karte zu sehen sein soll