Peut être raccourci avec JQuery?

Je vérifie un code tutoriel API Google Maps débutant.Peut être raccourci avec JQuery?

They have an example qui indique comment ajouter dynamiquement un script à une page, une fois le chargement de la page terminé. Je me demande si ce code peut être raccourci si j'utilise JQuery?

est ici le code ...

function initialize() { 
    var myLatlng = new google.maps.LatLng(-34.397, 150.644); 
    var myOptions = { 
    zoom: 8, 
    center: myLatlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
} 

function loadScript() { 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize"; 
    document.body.appendChild(script); 
} 

window.onload = loadScript;

possible?

Source

2010-09-05 Pure.Krome

Bien sûr, vous pouvez changer quelques appels à jQuery, mais je ne pense pas que vous sérieusement réduire quelque chose ici.

Il ressemblerait à quelque chose comme ça dans jQuery:

function initialize() { 
    var myLatlng = new google.maps.LatLng(-34.397, 150.644); 
    var myOptions = { 
    zoom: 8, 
    center: myLatlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map($("#map_canvas").get(0), myOptions); 
} 

$(document).ready(
    function{ 
    $.getScript('http://maps.google.com/maps/api/js?sensor=false&callback=initialize'); 
    });

Source

2010-09-05 13:50:13 Strelok

Oh ouais, vous devrez ajouter 24Kb de jQuery gzippé pour faire quelques lignes plus courtes: D – Strelok

J'ai dû remplacer votre ligne 'var map' avec ceci (cliquez sur @SimpleCoder) :: 'var map = new google.maps.Map ($ (" # map_canvas "). get (0), myOptions);' –

@Pure, en effet vous avez raison. Je vais éditer ma réponse. – Strelok

function initialize() { 
    var myLatlng = new google.maps.LatLng(-34.397, 150.644); 
    var myOptions = { 
    zoom: 8, 
    center: myLatlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map($("#map_canvas").get(0), myOptions); 
} 

$(function{ 
    $("<script></script>").attr("type", "text/javascript").attr("src", "http://maps.google.com/maps/api/js?sensor=false&callback=initialize").appendTo("head"); 
});

Ou, avec @ suggestion Tgr:

$.getScript("http://maps.google.com/maps/api/js?sensor=false&callback=initialize", function(){ 
     var myLatlng = new google.maps.LatLng(-34.397, 150.644); 
     var myOptions = { 
     zoom: 8, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     var map = new google.maps.Map($("#map_canvas").get(0), myOptions); 
});

Source

2010-09-05 13:46:54

Vous signifiait probablement '$ (" # map_canvas ") [0]'. – Tgr

@Tgr Oui merci, juste réparé –

Vous avez oublié de répondre réellement à la question ...;) – Guffa

jQuery a son propre chargeur de script, getScript().

Source

2010-09-05 13:47:19 Tgr

Pas vraiment. Certainement pas assez pour compenser un téléchargement de 50-80KB de jQuery.

Ma justification pour cela est que la plupart de ce code utilise la bibliothèque de cartes de Google. jQuery ne va pas être capable d'interagir avec une grande partie de cela et d'ailleurs, vu ce qu'il fait, c'est déjà assez compact. Je ne vois pas votre problème avec ce code.

Vous pourriez peut-être le réduire un peu ... Mais cela vous fait économiser des octets au détriment de la lisibilité.

function initialize() { 
    var myLatlng = new google.maps.LatLng(-34.397, 150.644); 
    var map = new google.maps.Map(document.getElementById("map_canvas"), { 
     zoom: 8, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
} 

window.onload = function() { 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize"; 
    document.body.appendChild(script); 
};

Source

2010-09-05 13:49:16 Oli

+1 Même pensée ici. La notion que jQuery peut rendre magiquement tout le code JavaScript plus court est drôle. ;) – Tomalak

Lorsque jQuery minifié est seulement environ 24 Ko –

@SimpleCoder qui est encore 24k vs beaucoup moins d'un-1kbyte d'économie. – Oli

Vous pouvez éviter l'injection de script en plaçant le script directement dans la page et même supprimer certaines variables inutiles, à savoir:

<body> 
<div id="map_canvas" style="width:100%; height:100%"></div> 
<script> 
    function initialize() { 
    return new google.maps.Map(document.getElementById("map_canvas"),{ 
    zoom: 8, 
    center: new google.maps.LatLng(-34.397, 150.644), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 
} 
</script> 
<script src="http://maps.google.com/maps/api/js?sensor=true&callback=initialize"> 
</script> 
</body>

Source

2010-09-05 14:28:05 Mic

Normalement, cela peut fonctionner ... Cependant, je ne suis pas sûr que Google Map JS vérifie DomReady. Si vous avez commencé avec leur bibliothèque dans l'en-tête, il pourrait s'éteindre avant qu'il y ait un DOM complet, et avant que la fonction 'initialize()' soit déclarée. – Oli

Cela fonctionne parce qu'il est à la fin de l'étiquette du corps, tout avant est chargé. – Mic

mais je ne peux pas supposer que le code ci-dessus sera injecté à la fin d'une étiquette de corps. Je n'ai jamais montré/supposé que j'ai une étiquette de corps, etc. (j'utilise des vues partielles, si cela a un sens). Le code valide ne s'applique pas à mon scénario :( –

Peut être raccourci avec JQuery?

Répondre

Questions connexes