Fehlermeldung beseitigten

1 Lena (Gast)

Hallo,
bei meinem Entwurf http://lena91567.bplaced.net/BING/ Wird der Kartendienst erst gestartet, wenn der Button angeklickt wurde.
Öffne ich die Entwickler-Tools im Google Chrome nachdem der Kartendienst geladen wurde, so erscheinen in der Konsole zwei Fehlermeldungen.
Was stimmt denn an dem Skript nicht bzw. wie kann ich die Fehlermeldungen beseitigen???

2 Jörg Kruse

Also diese Fehlermeldung:

Uncaught TypeError: Microsoft.Maps.Location is not a constructor

... bezieht sich auf diese Zeile:

center: new Microsoft.Maps.Location(49.8, 9.9),

Die Bildung des Map Objekts zwei Zeilen zuvor wirft dagegen keine Fehlermeldung:

map = new Microsoft.Maps.Map(document.getElementById('map'), {

Kann es vielleicht sein, dass zur Bildung des Location Objekts noch ein weiteres Script geladen werden muss:

        var scriptsToLoad = [
            "https://www.bing.com/api/maps/mapcontrol?branch=release&callback=loadMapScenario"
        ];

3 Lena (Gast)

Eigentlich braucht man nur noch das Skript bingmaps.js, das in meinem Beispiel über den HTML-Code aufgerufen wird.

Wenn die Karte sofort beim Laden der Seite aufgerufen wird, dann erscheint eine Fehlermeldung. Siehe hier: http://lena91567.bplaced.net/BING/0

4 Jörg Kruse

Eigentlich braucht man nur noch das Skript bingmaps.js, das in meinem Beispiel über den HTML-Code aufgerufen wird.

Ja, aber innerhalb von bingmaps.js werden die Scripte nachgeladen, die in dem Array var scriptsToLoad enthalten sind. Es kann auch sein, dass das Problem dadurch entsteht, dass bingmaps.js am Ende von body eingebunden ist und dann das zweite Script dadurch nachlädt, dass es dieses im head einhängt, welches ja bereits geparst wurde. Probier mal, ob es hilft, wenn auch das zweite Script am Ende von body eingehangen wird:

        function loadScript(src, onLoadCallback) {
            console.log("start loading source: " + src);
            var scriptTag = document.createElement("SCRIPT"); 
            scriptTag.setAttribute("src", src); 
            document.querySelector("body").appendChild(scriptTag);
            scriptTag.addEventListener("load", onLoadCallback, false);
        }

Wenn die Karte sofort beim Laden der Seite aufgerufen wird, dann erscheint eine Fehlermeldung

Du meinst diese Fehlermeldung:

Failed to load resource: the server responded with a status of 404 (Not Found)

Die könnte wohl dadurch behoben werden, indem unter http://lena91567.bplaced.net/favicon.ico ein Favicon abgespeichert wird

5 Lena (Gast)

Hallo Jörg,

Vielen vielen Dank für deine Tipps!
Ich meine sie umgesetzt zu haben, doch besser ist es nicht geworden.
Siehe hier: http://lena91567.bplaced.net/BING3/

Ich habe dann etwas anderes probiert.
Habe das Skript aufgeteilt.
Siehe hier: http://lena91567.bplaced.net/BING5/
Leider erscheint immer noch eine Fehlermeldung.
Hast Du eine Idee, wie man diese beseitigen kann?
Recht herzlichen Dank schon mal!

6 Jörg Kruse

Ich bin das Script jetzt mal im Detail durchgegangen.

        if (numberOfScriptFilesLoaded === scriptsToLoad.length) {
            console.log("all scripts are loaded - starting onApiLoadedCallback()");
            onApiLoadedCallback();
        } else {

Der Aufruf von onApiLoadedCallback() ist hier denke ich überflüssig? die betreffende Funktion loadMapScenario() wird ja bereits als Callback-Parameter an das externe mapcontrol Script übergeben und dann von diesem aufgerufen:

var scriptsToLoad = [
    "https://www.bing.com/api/maps/mapcontrol?branch=release&callback=loadMapScenario"
];

Ich habe das Script mal auf meinem System getestet: wenn der Aufruf von onApiLoadedCallback(); entfernt bzw. auskommentiert wird, dann wird die Karte dennoch geladen, aber die Fehlermeldung verschwindet.

7 Lena (Gast)

Guten Morgen Jörg,

Vielen vielen Dank für deine Bemühungen!
Aber den Aufruf entfernt und auch bei mir funktioniert es nun ohne Fehlermeldung. Dank deiner Hilfe. Dafür danke ich dir wirklich sehr!
Wünsche dir einen schönen Tag!

Viele Grüße, Lena

8 Lena (Gast)

Hallo Jörg,

Was muss ich denn in der http://lena91567.bplaced.net/BING5/opt-in.js ergänzen, wenn ich auch noch eine externe CSS laden möchte, wenn der Button geklickt wurde?

Angefangen hätte ich mit der Ergänzung

        var stylesToLoad = [
            "map.css"
        ];

damit bin ich aber am Ende meiner Weisheit.
Das Skript habe ich nämlich nicht selbst geschrieben.

9 Jörg Kruse

Du benötigst eine Funktion, die ein entsprechendes <link> Element zusammenbaut und in den Head einhängt:

function loadStyle(href) {
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = href;
    document.querySelector('head').appendChild(link);
};

Wenn das Array stylesToLoad nur eine URL enthält, reicht es, die Funktion mit der ersten URL einmalig aufzurufen:

function loadMapApi(onApiLoadedCallback) {
    var scriptLoadedCallback = function () {
        /* ... */
    };
    loadScript(scriptsToLoad[scriptLoadingKey], scriptLoadedCallback);
    loadStyle(stylesToLoad[0]);
};

Bei mehreren URLs kannst du die Funktion in einer for Schleife aufrufen, um das Array zu durchlaufen.

10 Lena (Gast)

lieber Jörg,
vielen herzlichen Dank für deine Hilfe!
Es funktioniert!
Die neueste Version habe ich allerdings noch nicht hochgeladen.
Wünsche dir noch einen schönen Tag und ein schönes Wochenende!
Nochmals Danke für deine Hilfe!
Liebe Grüße, Lena

nach oben

Fehlermeldung beseitigten

Beitrag schreiben (als Gast)