Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

Diskuze: Načítání scriptu pře javascript

JavaScript JavaScript Načítání scriptu pře javascript

Aktivity (1)
Avatar
David Moškoř:11. října 21:10

Dobrý den, mám udělanou stránku tím způsobem, že je jedna hlavička a patička a mezi to se PHPčkem vkládá obsah. Abych do hlavičky nemusel dávat všechny scripty tak načítám pouze ty, které potřebuji. Nikdy mně to nedělalo problém, ale u google map začalo. Pokud dám do stránky script ručně google mapa se načte a vše v pohodě funguje. Ale pokud vložím script do stránky pomocí javascriptu následovně:

$(".google_map").each(function () {
       $('head').append('<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MOJE_API"></script>' +
           '<script type="text/javascript" src="js/infobox.js"></script>');
   });

Tak se mapa načte ale jakmile kliknu na nějaký bod v mapě, tak se neotevře infobox. Nevíte kde je chyba? Celý kód zde:

var map;
function setMarkers(map, locations) {
    var image = {
        url: "/images/pripinacek.png",
        size: new google.maps.Size(26, 40),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(5, 5)
    };
    var image2 = {
        url: "/images/pripinacek_hover.png",
        size: new google.maps.Size(26, 40),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(5, 5)
    };

    for (var i = 0; i < locations.length; i++) {
        var points = locations[i];
        var myLatLng = new google.maps.LatLng(points[1], points[2]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image,
            title: points[0],
            zIndex: points[3],
            html: points[4]
        });

        google.maps.event.addListener(marker, "mouseover", function () {
            this.setIcon(image2);
        });
        google.maps.event.addListener(marker, "mouseout", function () {
            this.setIcon(image);
        });

        google.maps.event.addListener(marker, "click", function () {
            infobox.setContent(this.html);
            infobox.open(map, this);
        });
    }
}

function initialize() {
    var roadAtlasStyles = [{
        "featureType": "administrative",
        "stylers": [{
            "visibility": "on"
        }]
    }, {
        "featureType": "water",
        "stylers": [{
            "visibility": "simplified"
        }, {
            "color": "#53CBF5"
        }]
    }, {
        "featureType": "road",
        "stylers": [{
            "visibility": "off"
        }]
    }, {
        "featureType": "landscape.natural.terrain",
        "stylers": [{
            "visibility": "off"
        }]
    }, {
        "featureType": "administrative.country",
        "elementType": "geometry.fill",
        "stylers": [{
            "visibility": "off"
        }]
    }, {
        "featureType": "administrative.country",
        "elementType": "geometry.stroke",
        "stylers": [{
            "visibility": "on"
        }, {
            "weight": 2
        }, {
            "color": "#166316"
        }]
    }, {
        "featureType": "landscape.man_made",
        "stylers": [{
            "visibility": "off"
        }]
    }, {
        "featureType": "landscape.natural.landcover",
        "stylers": [{
            "visibility": "off"
        }]
    }, {
        "featureType": "poi",
        "stylers": [{
            "visibility": "off"
        }]
    }, {
        "featureType": "transit",
        "stylers": [{
            "visibility": "off"
        }]
    }, {
        "featureType": "landscape.natural",
        "stylers": [{
            "visibility": "simplified"
        }, {
            "color": "#9eb23f"
        }]
    }, {}];

    var mapOptions = {
        zoom: 5,
        center: new google.maps.LatLng(49.8288063, 18.170964899999944),
        panControl: false,
        zoomControl: false,
        mapTypeControl: false,
        scaleControl: false,
        streetViewControl: false,
        overviewMapControl: false,
        scrollwheel: false,
    };

    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    var styledMapOptions = {
        name: "Kolem Země cestovat denně"
    };
    var usRoadMapType = new google.maps.StyledMapType(roadAtlasStyles, styledMapOptions);
    map.mapTypes.set("usroadatlas", usRoadMapType);
    map.setMapTypeId("usroadatlas");

    // praporky na navstiveny mistech
    infobox = new InfoBox({
        content: document.getElementById("infobox"),
        disableAutoPan: false,
        maxWidth: 150,
        pixelOffset: new google.maps.Size(-140, 0),
        zIndex: null,
        boxStyle: {
            background: "",
            opacity: 1,
            width: "240px"
        },
        closeBoxURL: "images/ico-infobox-close.png",
        infoBoxClearance: new google.maps.Size(1, 1)
    });

    var markers = [
        ['blebleble', 10.123456, 10.123456, 0, "bleble"],
        ['blebleble', 10.123456, 10.123456, 1, "bleble"],
        ['blebleble', 10.123456, 10.123456, 2, "bleble"],
        ['blebleble', 10.123456, 10.123456, 3, "bleble"],
        ['blebleble', 10.123456, 10.123456, 4, "bleble"],
        ['blebleble', 10.123456, 10.123456, 5, "bleble"]
    ];

    setMarkers(map, markers);
}



$(window).on("load", function () {
    //pokud stránka obashuje google mapu
    $(".google_map").each(function () {
        initialize();
    });
}


$(document).ready(function () {
$(".google_map").each(function () {
        $('head').append('<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MOJE_API"></script>' +
            '<script type="text/javascript" src="js/infobox.js"></script>');
    });
}
Odpovědět 11. října 21:10
Všechno jde, když se chce!
Avatar
Lukáš Křehula
Redaktor
Avatar
Odpovídá na David Moškoř
Lukáš Křehula:11. října 21:38

Kolik tam těch prvků s třídou google_map máš? Je možné, že pokud jich tam máš víc, tak vícekrát načítáš script infobox.js a způsobuje to chyby. Ale každopádně bych tvůj kód upravil aspoň takhle:

$(document).ready(function () {
  if($(".google_map").length) {
        $('head').append('<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MOJE_API"></script>' +
            '<script type="text/javascript" src="js/infobox.js"></script>');
    }
}

Co mě ještě tak napadá, tak třeba může být chyba v tom (pokud je tohle celý tvůj js kód), nikde není inicializovaná proměnná infobox.

 
Nahoru Odpovědět 11. října 21:38
Avatar
David Moškoř:11. října 21:47

No ja jsem se podival do konzole a kdyz kliknu na bod tak mi to napise:

infobox.setContent is not a function

a

infobox.open is not a function

což je zvláštní protoze to funkce jsou. Díval jsem se a infobox mam v halvicce pouze jednou

Editováno 11. října 21:49
Nahoru Odpovědět 11. října 21:47
Všechno jde, když se chce!
Avatar
David Moškoř:11. října 21:54

Tohle neni cely kod ten je priserne dlouhý ale je to vse z google map. Zkoušel jsem i incializivat promennou a porad nic. Jak jsem již rikal když scripty vlozim do hlavicky ručně vse funguje a zadna chyba.

Nahoru Odpovědět 11. října 21:54
Všechno jde, když se chce!
Avatar
Lukáš Křehula
Redaktor
Avatar
Odpovídá na David Moškoř
Lukáš Křehula:11. října 22:03

Tak tím pádem, nejjednodušší řešení by bylo dát do hlavičky script infobox.js (normálně do HTML kódu) bez ohledu na to, jestli na stránce nějaké mapy vůbec budou.

Pokud to takhle nechceš, napadá mě ještě:

  • Načíst skript pomocí php rovnou do hlavičky (tzn. musel bys nějak vymyslet, kdy se má script načíst a kdy ne)
  • Zkusit přesunout tuhle část kódu:
// praporky na navstiveny mistech
    infobox = new InfoBox({
        content: document.getElementById("infobox"),
        disableAutoPan: false,
        maxWidth: 150,
        pixelOffset: new google.maps.Size(-140, 0),
        zIndex: null,
        boxStyle: {
            background: "",
            opacity: 1,
            width: "240px"
        },
        closeBoxURL: "images/ico-infobox-close.png",
        infoBoxClearance: new google.maps.Size(1, 1)
    });

Do metody setMarkers, tzn.

function setMarkers(map, locations) {
    var image = {
        url: "/images/pripinacek.png",
        size: new google.maps.Size(26, 40),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(5, 5)
    };
    var image2 = {
        url: "/images/pripinacek_hover.png",
        size: new google.maps.Size(26, 40),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(5, 5)
    };
    // praporky na navstiveny mistech
    infobox = new InfoBox({
        content: document.getElementById("infobox"),
        disableAutoPan: false,
        maxWidth: 150,
        pixelOffset: new google.maps.Size(-140, 0),
        zIndex: null,
        boxStyle: {
            background: "",
            opacity: 1,
            width: "240px"
        },
        closeBoxURL: "images/ico-infobox-close.png",
        infoBoxClearance: new google.maps.Size(1, 1)
    });
    for (var i = 0; i < locations.length; i++) {
        var points = locations[i];
        var myLatLng = new google.maps.LatLng(points[1], points[2]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image,
            title: points[0],
            zIndex: points[3],
            html: points[4]
        });

        google.maps.event.addListener(marker, "mouseover", function () {
            this.setIcon(image2);
        });
        google.maps.event.addListener(marker, "mouseout", function () {
            this.setIcon(image);
        });

        google.maps.event.addListener(marker, "click", function () {
            infobox.setContent(this.html);
            infobox.open(map, this);
        });
    }
}
  • Kontrolovat, kdy se načte script infobox.js, a až potom volat metodu initialize() (script se nemusí načíst před událostí "load" a tím pádem ti to může házet chyby, které píšeš, a jelikož script přidáváš do hlavičky dynamicky, tak věřím, že v tomhle může být ten problém)
 
Nahoru Odpovědět 11. října 22:03
Avatar
David Moškoř:11. října 22:15

Infobox jsem do setMarkers presunout již zkoušel a nic. Ale to s tím čekáním na načtení scriptu je super nápad. A navic to api od googlu načítá další scripty takze by se mi to hodilo. Problem je ze nevim jak na to pomihl by jsi mi s tim prosím

Nahoru Odpovědět 11. října 22:15
Všechno jde, když se chce!
Avatar
Lukáš Křehula
Redaktor
Avatar
Odpovídá na David Moškoř
Lukáš Křehula:11. října 22:29

No, asi bych to řešil nějak takto:

var script = document.createElement("script"); // vytvori prvek
document.getElementsByTagName('head')[0].appendChild(script); // prida ho do hlavicky
script.onload = function() { // pri nacteni scriptu inicializuji markery
   initialize();
};
script.src = "js/infobox.js"; // a jeste nastavim zdroj

Nevím, zda-li to bude fungovat, ale můžeš to zkusit. Dal bych to normálně do události ready, událost load bych smazal.

 
Nahoru Odpovědět 11. října 22:29
Avatar
David Moškoř:12. října 20:04

Díky mam dve otazky. 1. To muzu vlozit script pred tím nez nastavim adresu?
2. Jak muzu pockat nez se nactou oba ty scripty?

Nahoru Odpovědět 12. října 20:04
Všechno jde, když se chce!
Avatar
David Moškoř:12. října 20:26

Nakonec jsem zjistil ze chyba nema nic spolecneho s nacitanim scriptu, ale proste musi byt ten script v hlavičce. Protoze kdyz do konzole zadam funkci initialize() tak to porad nefunguje i kdyz je uz vse nactene... Nevíš v cem muze byt chyba? Ja uz vazne nevim. Předem díky

Nahoru Odpovědět 12. října 20:26
Všechno jde, když se chce!
Avatar
David Moškoř:12. října 20:33

UŽ VÍM V ČEM JE CHYBA!
Nevím jak je to možné, ale když načítám scripty v hlavičce, tak se nejdříve načtou všechny potřebné scripty od google, a až pak ten infobox.js. Zatímco pokud načítám scripty normálně v js tak se načítají oba najednou. Takže moje řešení:

if ($(".google_map").length) {
    var script = document.createElement("script");
    $("head").append(script);
    script.onload = function () {
        $('head').append('<script type="text/javascript" src="js/infobox.js"></script>');
        initialize();
    }
    script.type = "text/javascript";
    script.src = "http://maps.googleapis.com/maps/api/js?key=MOJE_API";
}
Editováno 12. října 20:34
Akceptované řešení
+5 Zkušeností
Řešení problému
Nahoru Odpovědět 12. října 20:33
Všechno jde, když se chce!
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 10.