Anwendung fast fertig, aber keine Karte in IE8

Hallo,

jetzt habe ich mich mit Unterstützung des Forums so geplagt und bin soweit gekommen,
dass die interaktive Karte für meine Gemeinde selbst auf mobilen Browsern funktioniert.

Leider macht jetzt der IE 8 nicht mehr mit.
Die Karte wird einfach nicht angezeigt.
Ich verstehe es nicht. Hat jemand einen Tipp wo ich da anfangen muss?
Danke und Gruß
Michael

http://mittenimbild.de/cb/

<script type="text/javascript">
		PROJECTION_4326 = new OpenLayers.Projection("EPSG:4326");
		PROJECTION_MERC = new OpenLayers.Projection("EPSG:900913"); 
		
		function drawmap(){
		OpenLayers.Lang.setCode('de');

    	
	--> der erste Fehler ist hier, aber wenn ich schreibe var map = gehts auch nicht

		map = new OpenLayers.Map('map', {controls: [
			new OpenLayers.Control.Navigation(),
			new OpenLayers.Control.MousePosition(),
			new OpenLayers.Control.Permalink(),
			new OpenLayers.Control.LoadStatus({html: '<img src="./img/loader.gif" /><br />Loading...'}),
            new OpenLayers.Control.TouchNavigation
			({
               dragPanOptions: {enableKinetic: true}
            }),
            new OpenLayers.Control.Zoom(),
 
			new OpenLayers.Control.Attribution(),
			//new OpenLayers.Control.LayerSwitcher(),
			new OpenLayers.Control.ScaleLine()],
			maxExtent : new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
			numZoomLevels : 19,
			maxResolution : 156543,
			units : 'm', 
			projection : PROJECTION_MERC,
			displayProjection : PROJECTION_4326 
			});

Nicht nur der IE8 hat Probleme damit. Alle IE bis Version 8. Ab IE9 klappt die Seite dann.
Zudem hat anscheinend auch der Firefox 16 ein Problem mit dieser Seite.
siehe dazu http://browsershots.org/http://mittenimbild.de/cb/

Edit: vielleicht solltest Du einen Vermerk machen wie z.b. “Diese Website ist optimiert für IE9” :wink:

Google unterstützt den IE8 ab November auch nicht mehr.

Nur mal so ins blaue hinein geraten:

Schreib doch mal in Zeile 46 ein “var” vor “map=”
Alternativ nenne Dein div mit der Karte in Zeile 46 und Zeile 182 “mapdiv”, damit Du nicht den Namen “map” sowohl für die js-Variable als auch für das div verwendest.

Grüße, Max

Max, wie immer ein Lichtblick, die Karte geht mit mapdiv,
Nur die rechte Spalte ist jetzt weg.
Das muss zu schaffen sein…
Gruß
Michael

Moin,

ich hatte mal einen ähnlichen Fall - als ich das JS in eine externe Datei gelegt hatte, gings plötzlich auch mit dem IE.

Vielleicht hilft das auch bei Dir?

LG,

-moenk

Danke für den Hinweis, eigentlich müsste es jetzt aber funktionieren, oder?

Vielleicht sollte ich mal was tippen, um diese bei OpenLayers-Anwendungen so beliebte Fehlerart zu beschreiben…

Symptom

Alles läuft auf einer OpenLayers-Seite, nur der Internet Explorer wirft ein rätselhaftes “Dieses Objekt unterstützt die Eigenschaft oder Methode nicht” an der Stelle aus, wo im Quelltext “map = new OpenLayers.Map(‘map’…)” steht.

Ursache

Der IE belegt benannte DOM-Elemente (also

s s s) mit globalen Javascript-Variablen. Das machen viele Browser so, das hier z.B. funktioniert mit fast allen Browsern und gibt ein alert mit dem Inhalt “blupp” aus:

<html>
<body onload="{alert(x.innerHTML);}">        
<div id='x'>Blupp</div>                             
</body></html>

Warum das so ist, weiss ich auch nicht, vermutlich will man den Programmierern das mühsame Tippen von document.getElementById(‘x’) ersparen.

Das wirklich besondere am Internet Explorer bis Version 8 ist, dass diese Variable “schreibgeschützt” ist und vor dem Überschreiben der Typ abgefragt wird. Diese Stück code funktioniert bei fast allen Browsern, aber nicht im IE 6,7,8:

<html>
<body onload="{x=0;alert(x);}">              
<div id='x'>Blupp</div>                             
</body></html>

Viele Browser sehen das “x”, überschreiben es mit 0 und geben alert(0) aus. Der IE sieht “x”, denkt sich “das ist doch mein div” und meldet “Dieses Objekt unterstützt die Eigenschaft oder Methode nicht”, weil “

=0” für ihn falsch aussieht.

Lösung

Eigentlich ist das alles kein grosses Problem. Nur wenige Menschen nutzen die gleichen Namen für ihre Variablen und ihr divs. Dummerweise hat sich aber gerade im OpenLayers-Umfeld dieses “map = new OpenLayers.Map(‘map’…)” eingebürgert und pflanzt sich durch Copy&Paste unkontrolliert fort.

Lösung 1: Keine globalen Variablen, einfach ein “var” vors “map” schreiben:

function drawmap(){
 var map = new OpenLayers.Map('map',...
...
}
...
<div id='map'></div>

Nachteil: Man hat keine globale Variable mehr, sondern nur ein “map” innerhalb von drawmap(). Das fällt einem möglicherweise bei anderen Funktionen wieder auf die Füsse, z.B. beim Popup-Aufpoppen odeer nachträglich zoomen mit map.zoomto().

Lösung 2: Verschiedene Namen für die JS-Variable und das div:

function drawmap(){
 map = new OpenLayers.Map('meinmapdiv',...
 ...
 }  
 ...
 <div id='meinmapdiv'></div>

(keine) Lösung 3: Vor der Definition des div die JS-Variable belegen, indem man weiter oben ein “var map” schreibt. Funktioniert in IE 7 und 8, aber nicht im IE6.

**
Lösung 4**: Man konzentriert sich auf den IE>=9, weil dort wird das anders gehandhabt, in order to increase interoperability between Internet Explorer and other browsers

Grüße, Max

Max, ganz vielen Dank für die ausführliche Erklärung - finde ich absolut wiki-tauglich!

Ja danke auch von mir, jetzt weiß ich auch, warum bei mir das mit dem var map aus Lösung 1 nicht funktioniert hat!

So, ab heute gehn die mobilen Browser nicht mehr, ich hab nix gemacht!!!

O.K., jetzt funktioniert es wieder, warum auch immer!

Was ist denn da los. Es funktioniert tageszeitabhängig?
Heute wird die Karte wieder nicht angezeigt.

Es gibt jetzt bei dem mobilen Browsern (Safari und Chrome) einen Javascript Fehler in Openlayers.js das bei mir auf dem Server liegt.
Syntax Error: Parse error
Dann folgen etliche Reference Error: Can’t find Variable: Openlayers.
Kann mir jemand einen Tipp geben??
Danke!

Problem eingegrenzt und hier beschrieben
http://forum.openstreetmap.org/viewtopic.php?pid=277844#p277844