Hallo zusammen,
ich bin relativ neu dabei was Wordpress angeht und gerade dabei, mir über die Free-Version einen eigenen Blog aufzubauen. Dort wollte ich u.a. eine "Visited Countries Map" einbinden. Diese habe ich über amcharts (https://www.amcharts.com/visited_countries/#) erstellt; dort erhält man anschließend einen html-Code zum Kopieren und Einfügen.
Nun mein Problem: wenn ich auf der Seite den Code einfüge und auf "Vorschau" klicke, klappt alles problemlos. Wenn ich die Seite allerdings veröffentliche, wird nicht die Map, sondern ein riesiger Codeschnipsel angezeigt:
Der Code, den ich in das html-Feld kopiert habe, ist folgender:
HTML
<script src="https://www.amcharts.com/lib/3/ammap.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/worldHigh.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/themes/dark.js" type="text/javascript"></script>
<div id="mapdiv" style="width: 800px; height: 450px;"></div>
<div style="width: 800px; font-size: 70%; padding: 5px 0; text-align: center; background-color: #FFFFFF; margin-top: 1px; color: #B4B4B7;"><a href="https://www.amcharts.com/visited_countries/" style="color: #B4B4B7;">Create your own visited countries map</a> or check out the <a href="https://www.amcharts.com/" style="color: #B4B4B7;">JavaScript Charts</a>.</div>
<script type="text/javascript">
var map = AmCharts.makeChart("mapdiv",{
type: "map",
theme: "dark",
projection: "mercator",
panEventsEnabled : true,
backgroundColor : "#FFFFFF",
backgroundAlpha : 1,
zoomControl: {
zoomControlEnabled : true
},
dataProvider : {
map : "worldHigh",
getAreasFromMap : true,
areas :
[
{
"id": "AT",
"showAsSelected": true
},
{
"id": "BE",
"showAsSelected": true
},
{
"id": "HR",
"showAsSelected": true
},
{
"id": "CZ",
"showAsSelected": true
},
{
"id": "FR",
"showAsSelected": true
},
{
"id": "DE",
"showAsSelected": true
},
{
"id": "HU",
"showAsSelected": true
},
{
"id": "IT",
"showAsSelected": true
},
{
"id": "LI",
"showAsSelected": true
},
{
"id": "LT",
"showAsSelected": true
},
{
"id": "LU",
"showAsSelected": true
},
{
"id": "NL",
"showAsSelected": true
},
{
"id": "NO",
"showAsSelected": true
},
{
"id": "PL",
"showAsSelected": true
},
{
"id": "PT",
"showAsSelected": true
},
{
"id": "SI",
"showAsSelected": true
},
{
"id": "ES",
"showAsSelected": true
},
{
"id": "SE",
"showAsSelected": true
},
{
"id": "CH",
"showAsSelected": true
},
{
"id": "GB",
"showAsSelected": true
},
{
"id": "VA",
"showAsSelected": true
},
{
"id": "PR",
"showAsSelected": true
},
{
"id": "US",
"showAsSelected": true
},
{
"id": "TN",
"showAsSelected": true
},
{
"id": "AU",
"showAsSelected": true
}
]
},
areasSettings : {
autoZoom : true,
color : "#B4B4B7",
colorSolid : "#0088FF",
selectedColor : "#0088FF",
outlineColor : "#666666",
rollOverColor : "#9EC2F7",
rollOverOutlineColor : "#000000"
}
});
</script>Hat jemand eine Idee, wo hier das Problem liegen könnte?
Vielen lieben Dank!
