Google Maps: openInfoWindowTabsHtml + GDownloadUrl (appel Ajax) question

Question

Je suis confronté au problème suivant. Sur une carte Google, je souhaite ajouter des fenêtres d'informations avec des onglets, où le contenu est chargé à partir d'un fichier externe à l'aide de la méthode GDownloadUrl. Le code fonctionne très bien, mais avec deux problèmes. a) La première fois que je clique sur un marqueur, rien ne se passe. Je dois cliquer deux fois pour obtenir une boîte d'information. Après ça ça marche bien. b) Lorsque je ferme une boîte d'information et que je l'ouvre à nouveau, les onglets se répètent. Chaque fois que je rouvre la boîte d'information, ces onglets se répètent. Donc, si vous utilisez le code ci-dessous et ouvrez la boîte d'information 3 fois, j'obtiens 6 onglets (Info, Photos, Info, Photos, Info, Photos). Une idée de ce que je fais mal ici?

J'ai également essayé ceci avec la méthode $ .get de JQuery, mais les résultats sont exactement les mêmes.

function createREMarker(lat,long,reID) 
{ 
    var reMarker = new GMarker(rePoint,iconRE); 
    GEvent.addListener(reMarker, "click", function() 
    { 
     GDownloadUrl('testcontent.php?reID='+reID+'&what=info', function(data) { 
      content1 = data; 
     }); 
     GDownloadUrl('testcontent.php?reID='+reID+'&what=photos', function(data) { 
      content2 = data; 
     }); 
     tabs.push(new GInfoWindowTab('Info', '<div id="mapOverlayContent" style="width:375px; height:220px; overflow:auto;">'+content1+'</div>')); 
     tabs.push(new GInfoWindowTab('Photos', '<div id="mapOverlayContent" style="width:375px; height:220px; overflow:auto;">'+content2+'</div>')); 
     reMarker.openInfoWindowTabsHtml(tabs); 
    }); 
    return reMarker; 
}; 

Answer 1

Tout d'abord, vous utilisez v2 de l'API qui est maintenant officiellement obsolète. Pour un site, je maintiens que je fais ce qui suit (ce qui est de l'API v3 et utilise jQuery):

function createMarker(point, id, markerOptions) { 
    var marker = new google.maps.Marker(point,markerOptions); 
    var Lat = point.lat(); 
    var Lng = point.lng(); 

    google.maps.Event.addListener(marker, "click", function() { 
     $.ajax({ 
      type: "GET", 
      url: "/data/specific.xml?id=" + id, 
      dataType: "xml", 
      success: function(xml) { 
       var this_marker = $(xml).find('marker'); 
       var name = $(this_marker).attr("name"); 
       details_tab = details_tab + "ID: " + id + "<br />Name: " + name + "<br />"; 
       var infowindow = new google.maps.InfoWindow({ 
        content: details_tab, 
       }); 
       infowindow.open(map, marker); 
      } 
     }); 
    } 
    return marker; 
} 

D'après ce que je peux voir les onglets ne sont plus pris en charge dans v3 de l'API? :(Mais cet exemple utilise des onglets de l'interface utilisateur jQuery.

http://gmaps-samples-v3.googlecode.com/svn-history/r78/trunk/infowindow/tabs.html

http://code.google.com/p/gmaps-samples-v3/source/browse/trunk/infowindow/tabs.html?r=78