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

David Moškoř

Člen

David Moškoř:11.10.2017 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.10.2017 21:10

Život je příliš krátký na to, abyste vymýšleli smysluplné názvy proměnných...

Lukáš Křehula

Tvůrce

Lukáš Křehula:11.10.2017 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.10.2017 21:38

David Moškoř

Člen

David Moškoř:11.10.2017 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.10.2017 21:49

Nahoru Odpovědět

11.10.2017 21:47

Život je příliš krátký na to, abyste vymýšleli smysluplné názvy proměnných...

David Moškoř

Člen

David Moškoř:11.10.2017 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.10.2017 21:54

Život je příliš krátký na to, abyste vymýšleli smysluplné názvy proměnných...

Lukáš Křehula

Tvůrce

Lukáš Křehula:11.10.2017 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.10.2017 22:03

David Moškoř

Člen

David Moškoř:11.10.2017 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.10.2017 22:15

Život je příliš krátký na to, abyste vymýšleli smysluplné názvy proměnných...

Lukáš Křehula

Tvůrce

Lukáš Křehula:11.10.2017 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.10.2017 22:29

David Moškoř

Člen

David Moškoř:12.10.2017 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.10.2017 20:04

Život je příliš krátký na to, abyste vymýšleli smysluplné názvy proměnných...

David Moškoř

Člen

David Moškoř:12.10.2017 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.10.2017 20:26

Život je příliš krátký na to, abyste vymýšleli smysluplné názvy proměnných...

David Moškoř

Člen

David Moškoř:12.10.2017 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.10.2017 20:34

Akceptované řešení
+5 Zkušeností

Nahoru Odpovědět

12.10.2017 20:33

Život je příliš krátký na to, abyste vymýšleli smysluplné názvy proměnných...

Nejčastěji vyhledáváné

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