"a is null" même après que la carte Google a été chargée avec succès

Question

J'ai un ensemble d'onglets d'interface utilisateur jQuery qui charge chacun project.php en utilisant ajax. En fonction des paramètres passés au script, une autre carte Google est affichée en utilisant le code JavaScript suivant dans project.php:

var tab_index = $('#tabs').tabs('option', 'selected'); 
$('.site_map:visible').css('height','300px'); 

MapID = $('.site_map:visible').attr('id'); 

if (MapID !== 'map-new'){ 
    var map_id = 'map-'+tab_index; 
    $('.site_map:visible').attr('id', map_id); 
} else { 
    MapNewSite(); 
} 

var latlng = new google.maps.LatLng(19,-70.4); 
var myOptions = { 
    zoom: 8, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

arrMaps[tab_index] = new google.maps.Map(document.getElementById("map-" + tab_index), myOptions); 
arrInfoWindows[tab_index] = new google.maps.InfoWindow(); 
placeMarker($('.site_details:visible .inpLat').val(), $('.site_details:visible .inpLng').val(), tab_index); 

function MapNewSite(){ 
    arrMaps[tab_index] = new google.maps.Map(document.getElementById("map-new"), myOptions); 
    placeMarker(19,-70.4,tab_index); 
    arrInfoWindows[tab_index] = new google.maps.InfoWindow(); 
} 

Chaque carte chargée à l'aide des paramètres renvoyés par une requête de mes charges de base de données sans aucun problème. Cependant, dans une dernière instance, je charge project.php dans un onglet sans aucun paramètre afin d'avoir un onglet vierge pour les utilisateurs à manipuler. Le signal que la carte ne doit pas être chargée en utilisant les coordonnées de la base de données est que l'identifiant de sa div est "map-new".

La carte générée dans cet onglet se charge, mais me donne ensuite l'erreur "a is null" qui signifie généralement qu'elle n'a pas pu trouver de div avec l'ID spécifié pour initialiser la carte. Quelle est l'origine de cette erreur même après le chargement de la carte? Comment puis-je arrêter l'erreur?

Voici le JavaScript dans la page parent contenant le site onglet:

var arrMaps = {}; 
    var arrInfoWindows = {}; 
    var arrMarkers = {}; 

    function placeMarker(lat, lng, tab_index){ 
     map = arrMaps[tab_index]; 
     var bounds = new google.maps.LatLngBounds(); 
     var latlng = new google.maps.LatLng(
      parseFloat(lat), 
      parseFloat(lng) 
     ); 

     bounds.extend(latlng); 
     createMarker(latlng, tab_index); 
     map.fitBounds(bounds); 

     zoomChangeBoundsListener = 
      google.maps.event.addListener(map, 'bounds_changed', function(event) { 
       if (this.getZoom()){ 
        this.setZoom(10); 
       } 
      google.maps.event.removeListener(zoomChangeBoundsListener); 
     }); 
    } 

    function createMarker(latlng, tab_index) { 
     var html = '<a href="#" target="_blank" onclick="OpenMapDialog();return false;">Click here to move marker</a>'; 
     arrMarkers[tab_index] = new google.maps.Marker({ 
      map: arrMaps[tab_index], 
      position: latlng 
     }); 

     arrInfoWindows[tab_index] = new google.maps.InfoWindow(); 

     google.maps.event.addListener(arrMarkers[tab_index], 'click', function() { 
      arrInfoWindows[tab_index].setContent(html); 
      arrInfoWindows[tab_index].open(arrMaps[tab_index], arrMarkers[tab_index]); 
     }); 
    } 

    $(function() { 
     $("#tabs").tabs({ 
      ajaxOptions: { 
       error: function(xhr, status, index, anchor) { 
        $(anchor.hash).html(
         "Couldn't load this tab. We'll try to fix this as soon as possible. " + 
         "If this wouldn't be a demo."); 
       } 
      }, 
      cache: true 
     }); 
    }); 

Answer 1

Il s'avère que j'ai accidentellement initialisé la carte à la fois à l'intérieur du if et à l'extérieur.

Answer 2

Jetez un oeil à http://www.pittss.lv/jquery/gomap/. Facile à utiliser et très puissant. Je l'utilise moi-même.