La fonction javascript ne fonctionne pas

Question

J'ai le script ci-dessous placé dans la tête de la page. La carte doit s'initialiser lorsque la page est chargée. Il y a deux pièces à ce puzzle, l'une est le script dans le document.ready qui définit toutes les variables et configure la carte que je veux placer sur une page. La deuxième pièce est le window.onload=initialize_map; qui démarre la carte.

Je crois que tout fonctionne correctement, cependant, je ne sais pas avec certitude. Tout ce que je sais, c'est que la fonction initialize_map ne s'exécute jamais. J'ai même essayé de définir un onclick sur un bouton avec initialize_map(); pour essayer de démarrer manuellement la carte et cela ne fonctionnait toujours pas. Y at-il un problème avec mon code? Toute aide est grandement appréciée.

Merci!

CODE EN QUESTION:

<script src= "http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAhTrgZ5jvdqcEQouEpPcZ_hS81NmJwGXlxuJr8lEEo4Njw3WRVhT8auzZb55JSMDkwIaCdNkPHL5gNg" type="text/javascript"> </script> 

<script type="text/javascript"> 
$(document).ready(function(){ 
var dealerName = $('.name', '.adr').text(); 
var customerName = dealerName.slice(0, - 1); 
var customerAddress = $('.street', '.adr').text() + ', ' + $('.locality', '.adr').text() + ', ' + $('.state', '.adr').text() + ', ' + $('.zipCode', '.adr').text(); 
$("#nameAddress .placeholderName").html(customerName); 
$("#nameAddress .placeholderAddress").html(customerAddress); 

     var error_address_empty  = 'Please enter a valid address first.'; 
     var error_invalid_address = 'This address is invalid. Make sure to enter your street number and city as well?'; 
     var error_google_error  = 'There was a problem processing your request, please try again.'; 
     var error_no_map_info  = 'Sorry! Map information is not available for this address.'; 


     var default_address = customerAddress; 

     var current_address = null; 
     var map    = null; 
     var geocoder   = null; 
     var gdir     = null; 
     var map_compatible = false; 

     if(GBrowserIsCompatible()) { 
      map_compatible = true; 
     } 

     function initialize_map() { 
      if(map_compatible) { 
       map   = new GMap2(document.getElementById('map_canvas'));   
       geocoder = new GClientGeocoder(); 
       show_address(default_address); 

       map.addControl(new GSmallMapControl()); 

       map.addControl(new GMapTypeControl());    
      } 
     } 

     function show_address(address) { 
      if(map_compatible && geocoder) { 
       current_address = address;  
       geocoder.getLatLng(
       address, 
       function(point) { 
        if(!point) { 
         alert(error_no_map_info); 
        } else { 
         map.setCenter(point, 13); 
         var marker = new GMarker(point); 
         map.addOverlay(marker); 
         marker.openInfoWindowHtml("<span style='font-size:14px; font-weight:bold;'>" + customerName + "<br /></span><span style='font-size:12px;'>" + address + "</span>"); 
        } 
       } 
       ); 
      } 
      return false; 
     } 

     function get_directions() { 
      if(map_compatible) { 
       if(document.direction_form.from_address.value == '') { 
        alert(error_address_empty); 
        return false; 
       } 

       document.getElementById('directions').innerHTML = ''; 

       gdir = new GDirections(map, document.getElementById('directions')); 

       GEvent.addListener(gdir, 'error', handleErrors); 

       set_directions(document.direction_form.from_address.value, current_address);    
      } 
      return false; 
     } 

     function set_directions(fromAddress, toAddress) { 
     gdir.load("from: " + fromAddress + " to: " + toAddress, 
        { "locale": "en" }); 
     } 

     function handleErrors(){ 
      if(gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS) 
       alert(error_invalid_address); 
      else if(gdir.getStatus().code == G_GEO_SERVER_ERROR) 
       alert(error_google_error); 
      else if(gdir.getStatus().code == G_GEO_MISSING_QUERY) 
       alert(error_address_empty); 
      else 
       alert(error_invalid_address); 
     } 
}); 
     window.onload=initialize_map; 
</script> 

Answer 1

Deux problèmes sautent tout de suite:

1. initialize_map n'est pas dans la portée globale (il est défini dans le gestionnaire d'événements ready anonyme), de sorte que vous assignons probablement une valeur indéfinie à window.onload, comme vous avez placé l'assignation elle-même en dehors de cette fonction (dans la portée globale). Pourquoi est-ce que vous mélangez le gestionnaire ready de jQuery avec window.onload? Au pire, cela ne fonctionne pas - from the jQuery documentation:

   La méthode .ready() est généralement incompatible avec l'attribut. Si load doit être utilisé, n'utilisez pas .ready() ou utilisez la méthode .load() de jQuery pour attacher des gestionnaires d'événements de chargement à la fenêtre ou à des éléments plus spécifiques, comme des images.

   ... et même au mieux, ce n'est pas nécessaire. Utilisez jQuery pour les deux ou aucun des deux:

   $(document).ready(function(){ 
   
       ... 
   
       $(window).load(initialize_map); 
   
       ... 
   
   }); 
   

Answer 2

Le corps de votre fonction est dans une instruction if qui dépend de la map_compatible variable booléenne étant vrai. Êtes-vous sûr que c'est vrai? Essayez de placer une alerte avant l'instruction if et vérifiez si elle s'exécute de cette manière. Peut-être imprimer la valeur de map_compatible. Si ce n'est pas le cas, vous pouvez utiliser un outil comme firebug for firefox pour parcourir votre javascript et voir pourquoi il n'est pas défini sur true comme vous le souhaitez.