Fehler: Niemals HTML Code im Editor!
Never ever!
Das geht einfach nicht gut.

Vielleicht habe ich mich nur missverständlich ausgedrückt: ich habe den HTML-Code eingefügt, nachdem ich den Haken bei "HTML-Code anzeigen" gesetzt hatte. Dass es zu Problemen kommen kann, wenn ich HTML-Code in einen Text-Editor einfüge (der ja auch noch mit Textauszeichnungen arbeitet), kann ich mir durchaus vorstellen.

Bei Google unten rechts auf das Zahnrad klicken und "Karte teilen und einbetten" und dann einfach im Tab "Einbetten" den iFrame-Code kopieren und in einem globalen Inhaltsblock einfügen.

Bei OpenStreetMap rechts auf das Viereck mit dem Pfeil ("Teilen") klicken, "HTML" wählen, kopieren und im globalen Inhaltsblock einfügen.

Den globalen Inhaltsblock dann einfach in den Inhalt der Seite einfügen, fertig.

- Editor der Seite deaktiviert
- Code im Editor eingefügt:

<p>Falls Sie uns besuchen möchten, finden Sie uns hier:</p> 
<a href="#" onclick="document.getElementById('inhalt1').style.display = 'block';">Map 1</a>
<div id="inhalt1">
    <div id="map1" style="width:600px;height:400px;"></div>
</div>

(ich brauche erstmal nur eine Karte)
- Code im Template eingefügt:

<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
    map = new OpenLayers.Map("map1");
    var mapnik = new OpenLayers.Layer.OSM();
    map.addLayer(mapnik);
    var clonlat = new OpenLayers.LonLat(8.019120, 53.391230).transform( new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913") );
    var zoom = 12;
    map.setCenter(clonlat, zoom);
</script>

- Stylesheet mit

div.olControlAttribution {bottom:3px;}
    #inhalt {width:600px;height:400px;}
    li {display:inline-block;}

angelegt und mit meinem Template verknüpft.
- Seite aufgerufen und - nichts. Außer dem Link tut sich da gar nichts...

Wisst Ihr, warum ???

Hab ich das jetzt richtig verstanden: ich kopiere den HTML-Code mit dem Editor direkt in meinen Inhalt

Fehler: Niemals HTML Code im Editor!
Never ever!
Das geht einfach nicht gut.

Entweder den Editor stattdessen für diese Seite immer deaktivieren (siehe Tab "Optionen"), und dann mit Copy & Paste ...
Oder den HTML-Code in einen globalen Inhaltsblock mit generell deaktiviertem Editor speichern und die Map dann mit {global_content name="Meine_Map"} im Inhalt einfügen.

ABER...

jsfiddle ist da bissle kompliziert/unübersichtlich, wenn man es nicht ständig verwendet.
Drei Dinge brauchst Du:
1. HTML Code (das sind die Tabs und die zugehörigen DIVs oben links)
2. Javascript (unten links - das muss noch in <script>...</script> Tags; UND links im Menü unter "External Ressources" das OpenLayers Script):

<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
    map = new OpenLayers.Map("map1");
    var mapnik = new OpenLayers.Layer.OSM();
    map.addLayer(mapnik);
    var clonlat = new OpenLayers.LonLat(11.9926, 51.4986).transform( new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913") );
    var zoom = 12;
    map.setCenter(clonlat, zoom);

    map = new OpenLayers.Map("map2");
    var mapnik = new OpenLayers.Layer.OSM();
    map.addLayer(mapnik);
    var clonlat = new OpenLayers.LonLat(12, 52).transform( new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913") );
    var zoom = 12;
    map.setCenter(clonlat, zoom);


    map = new OpenLayers.Map("map3");
    var mapnik = new OpenLayers.Layer.OSM();
    map.addLayer(mapnik);
    var clonlat = new OpenLayers.LonLat(11, 50).transform( new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913") );
    var zoom = 12;
    map.setCenter(clonlat, zoom);
</script>

3. die Stylesheets (oben rechts)

Hier noch ein Beispiel: http://jsfiddle.net/KWX47/
Ist garnicht so kompliziert wie ich dachte.
Da wird auch nix doppelt geladen/gezeichnet.

Hab ich das jetzt richtig verstanden: ich kopiere den HTML-Code mit dem Editor direkt in meinen Inhalt, lege ein neues Stylesheet an und verbinde es mit meinem Template, speichere das JavaScript ab und referenziere es anschließend mittels

<script type="text/javascript" src="{root_url}/uploads/themes/.../js/jquery.openstreetmaps.js" ></script>

in meinem Template ?

Bei mir tut sich da leider nichts bis auf die Textausgabe... 

Ich muss jetzt noch checken, ob das mit Foundation 4 auch schon geht, bzw. ob ich das ganze irgendwie problemlos updaten kann...

Anscheinend kann er da aber nachträglich nichts mehr ändern - meint ihr, dass es damit funktionieren könnte?

Das Problem dabei war ja, dass das div eine id hat und diese dann drei mal ins Template eingefügt werden sollte und das dannn nicht funktioniert hat.

Hast du da vielleicht eine Idee wie ich das anstellen könnten.
Theoretisch könnte ich ja für alle Bildschirmgrößen eine Karte einfügen lassen und dann dementsprechend die Breite einstellen!

Vielen Dank für eure Hilfe!

Und das container-div sollte sich dann einfach in der Breite des Mediums anpassen!