javascript - Indlæs javascript dynamisk (google maps) - Udvikleren.dk

Tags: javascript

Bruger #3427 @ 14.04.12 14:56

Hej.

Jeg har en side der indeholder 4 faneblade, og under kontakt ønsker jeg at vise et google map, men syndes ik der er nogen grund til at indlæse det før brugeren trykker på det faneblad, da det måske sker i 1 ud af 10 tilfælde.

jeg har prøvet:

JScript kode

 $("a[href=#contact]").click(function(){
   if(!mapLoaded){
     mapLoaded = true;
       
     var head = document.getElementsByTagName("head")[0];
     var script = document.createElement("script");
     script.type = "text/javascript";
     script.src = "http://maps.googleapis.com/maps/api/js?sensor=false";
     script.onload = function(){
 
       var script2 = document.createElement("script");
       script2.type = "text/javascript";
       script2.src = "/interface/js/google_maps.js";
       script2.onload = function(){
             
         var map = new google_maps("map_canvas");
         
         map.api_key = "ABQIAAAA89C1TPuWuaGVPZNW0NMDGRQLXiVZ7L-4NhXiS41dTJGrvjuVrhRdLalVxW058fIyePWm2i_MvEqXeA";
         map.options.zoom = 13;
         map.lookup_cords(
           "Odense, Denmark", 
           function(cords){
             if(cords.Status.code == 200){
               map.options.startPoint = map.point(cords.Placemark[0].Point.coordinates[1], cords.Placemark[0].Point.coordinates[0]);
               map.drawMap();
             }else{
               $("#map_canvas").html("Unable to find location.");
             }
           }, 
           function(){
             $("#map_canvas").html("Unable to load map.");
           }
         );
         
       }
       head.appendChild(script2);
       
     }
     head.appendChild(script);
     
   }   
 });

men jeg får denne fejl;
google.maps.LatLng is not a constructor
...tlng = new google.maps.LatLng(this.options.startPoint.lat, this.options.startPoi... @ google_maps.js (line 70)

det virker helt fint hvis jeg indlæser de 2 javascript på siden, alså uden denne kode. - så som om at min google_maps.js ikke kan se at den anden fil fra google server er blevet indlæst.

nogle bud, på en løsning?

Indlæg senest redigeret d. 14.04.2012 14:57 af Bruger #3427

6 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 4 karma

Sorter efter stemmer Sorter efter dato

Bruger #17081 @ 14.04.12 15:06

1.258

hvis du alligevel bruger jquery .. hvorfor så ikke bruge $.getScript ? .. jeg er nemlig ikke sikker på onload virker på et script .. og du får sikkert fejlen fordi, du kalder nogle funktioner på dit script inden det er loadet helt færdigt

skal du lave mere avanceret lazy script loadling / asyncron script loading kan du evt. kigge på:

http://yepnopejs.com/ (Script loader)
http://headjs.com/ (All round script loader)
https://github.com/unscriptable/curl (AMD loader og "lazy loader")
http://requirejs.org/ (AMD loader)

Indlæg senest redigeret d. 14.04.2012 15:10 af Bruger #17081

Bruger #3427 @ 14.04.12 15:12

1.520

hvis du alligevel bruger jquery .. hvorfor så ikke bruge $.getScript ? .. jeg er nemlig ikke sikker på onload virker på et script .. og du får sikkert fejlen fordi, du kalder nogle funktioner på dit script inden det er loadet helt færdigt

Ved faktisk ikke lige hvorfor jeg ik bruger den, havde glemt den var der

har lige prøvet, men giver samme fejl.

edit:

har lige prøvet:

JScript kode

 $.getScript("http://maps.googleapis.com/maps/api/js?sensor=false", function(data, textStatus){
   console.log(data, textStatus); //undefined success
 });
       
 $.getScript("/interface/js/google_maps.js", function(data, textStatus){
   console.log(data, textStatus); //mitScript success
 });

så mit gæt er pga cross-site scripting halløj bliver google scriptet ikke indlæst.

Indlæg senest redigeret d. 14.04.2012 15:31 af Bruger #3427

Bruger #17081 @ 14.04.12 15:39

1.258

du skal kalde dit script inde i callbacken på google api kaldet.. ellers bliver de to scripts loadet på samme tid

Bruger #3427 @ 14.04.12 15:42

1.520

du skal kalde dit script inde i callbacken på google api kaldet.. ellers bliver de to scripts loadet på samme tid

ved jeg godt, var bare for at vise hvad der kom retur, kørte dem enkeltvis de kode stumper.

Bruger #17081 @ 14.04.12 15:56

1.258

det kan jo være der faktisk er en fejl i dit script så jo >_<

edit:
Hmn, det ser ud til, at http://maps.googleapis.com/maps/api/js?sensor=false også laver et script kald, så bare fordi den returnere og er loadet. Så betyder det ikke, at selve scriptet er klar, kan det mon være fejlen?

Prøv, at loade google scriptet uden, at loade dit eget. Og se om du evt. bare kan skrive:
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
i consolen?

Indlæg senest redigeret d. 14.04.2012 16:04 af Bruger #17081

Bruger #3427 @ 14.04.12 16:38

1.520

Har løst det på en anden måde.

JScript kode

 $("a[href=#contact]").click(function(){
   if(!mapLoaded){
     mapLoaded = true;
 
     $("head").append("<" + "script type=\'text/javascript\' src=\'http://maps.googleapis.com/maps/api/js?sensor=false&callback=googlemaps_is_ready\'" +"><" +"/script>");
   }   
 });
 
 function googlemaps_is_ready(){
 
 $.getScript("/interface/js/google_maps.js", function(data, textStatus){
   console.log(data, textStatus);
 
   var map = new google_maps("map_canvas");
 
   map.api_key = "ABQIAAAA89C1TPuWuaGVPZNW0NMDGRQLXiVZ7L-4NhXiS41dTJGrvjuVrhRdLalVxW058fIyePWm2i_MvEqXeA";
   map.options.zoom = 13;
   map.lookup_cords(
     "Odense, Denmark", 
     function(cords){
       if(cords.Status.code == 200){
         map.options.startPoint = map.point(cords.Placemark[0].Point.coordinates[1], cords.Placemark[0].Point.coordinates[0]);
         map.drawMap();
       }else{
         $("#map_canvas").html("Unable to find location.");
       }
     }, 
     function(){
       $("#map_canvas").html("Unable to load map.");
     }
   );
 
 });
 
 }

Indlæg senest redigeret d. 14.04.2012 16:38 af Bruger #3427

Indlæs javascript dynamisk (google maps)

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler