Google maps multiples sur une seule page - ne peut charger un seul à la fois

Je suis très nouveau en HTML et Javascript (moins d'une semaine d'expérience) et je suis coincé dans la situation suivante. J'ai créé 6 visualisations google map en utilisant le paquet googleVis pour R (trucs simples - juste des marqueurs sur une carte). J'ai extrait le Javascript des objets de googleVis dans R et les ai inclus dans un site simple qui contient 6 divs pour chacune des 6 cartes différentes.Google maps multiples sur une seule page - ne peut charger un seul à la fois

Chaque fichier JavaScript inclut une fonction pour créer un objet JSON, une fonction pour dessiner la carte, et une fonction pour afficher la carte:

//define JSON  
function gvisDataWest() 
     { 
      var data = new google.visualization.DataTable(); 
      var datajson = 
     [ 
     [ 
      33.5313, 
      -112.1774, 
     "<p>2005-2009 Poverty Rate: 40.7%</p> <p>2000 Poverty Rate: 34.3%</p> <p>Significant difference: 0.0 points </p>" 
     ], 
     ... many rows of data ... 
    ]; 
    data.addColumn('number','Latitude'); 
    data.addColumn('number','Longitude'); 
    data.addColumn('string','tip'); 
    data.addRows(datajson); 
    return(data); 
    } 

//draw chart 
function drawChartWest() { 
    var data = gvisDataWest(); 
    var options = {}; 
options["showTip"] = true; 
options["enableScrollWheel"] = true; 
options["width"] = 400; 

    var chart = new google.visualization.Map(
     document.getElementById('West') 
    ); 
    chart.draw(data,options); 
} 

//display chart 
function displayChartWest() 
{ 
    google.load("visualization", "1", { packages:["map"] }); 
    google.setOnLoadCallback(drawChartWest); 
}

Chaque javascript fichier inclut des fonctions et des données pour une région différente du le pays (par exemple il y aurait des définitions pour gvisDataMidwest(), givsDataSouthEast(), etc.).

est ici à peu près ce que mon HTML ressemble à:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
    <head> 
    <meta content="text/xml; charset=UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=8" /> 
    <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
    <script src="../povscripts/map1.js" type="text/javascript"></script> 
    <script src="../povscripts/map2.js" type="text/javascript"></script> 
    <script src="../povscripts/map3.js" type="text/javascript"></script> 
    <script src="../povscripts/map4.js" type="text/javascript"></script> 
    <script src="../povscripts/map5.js" type="text/javascript"></script> 
    <script src="../povscripts/map6.js" type="text/javascript"></script> 
    </head> 
    <body> 
     ...a bunch of divs, headers, <p>'s, etc... 
     ...then six divs like this, each with an appropriate id: 
     <div class="anncdiv"> 
      <div class="bannertitle"> 
       <p class="btxt">West</p> 
      </div> 
      <div class="anncdivIn" id="West"> 
      <script type="text/javascript"> displayChartWest() </script> 
      </div> 
     </div> 
    <div class="anncdiv"> 
     <div class="bannertitle"> 
      <p class="btxt">Midwest</p> 
     </div> 
     <div class="anncdivIn" id="Midwest"> 
     <script type="text/javascript"> displayChartMidwest() </script> 
     </div> 
    </div>

LE PROBLÈME: Avec la façon dont je suis actuellement bricolé ce site ensemble, si deux fonctions dsplayChart * *() appelés partout sur le site (comme dans cet exemple, avec displayChartWest() et displayChartMidwest()) tous les divs apparaissent vides. Mais, si je devais juste inclure un de ces appels de fonction, alors la carte affiche bien dans le div approprié. D'une manière ou d'une autre, appeler deux de ces fonctions ou plus aboutit à un conflit, bien que je ne sache pas pourquoi. Votre aide est grandement appréciée. Cheers, AR

Source

2011-11-03 Al R.

Je pense que vous devrez peut-être attendre jusqu'à ce que le DOM est chargé avant d'allumer vos cartes. Sans utiliser une bibliothèque comme jQuery, vous pouvez le faire en utilisant l'événement onload du corps:

<body onload="displayCharts()"> 
...page source... 
<script type="text/javascript"> 
    function displayCharts() { 
     displayChartWest(); 
     displayChartMidwest(); 
    } 
</script> 
</body>

Source

2011-11-03 03:34:06

Je pensais qu'il pourrait être quelque chose comme ça, mais quand j'ai essayé d'utiliser onload dans la balise body, ou window.onload, ou même d'inclure jQuery et d'utiliser quelque chose comme $ (document) .ready(), j'ai rencontré le même résultat. –

J'ai essayé de charger ceci sur une autre machine et j'ai pu charger trois des cartes, mais en ajoutant une quatrième carte (ou un quatrième appel à une fonction displayChart ****()), le site a été cassé. Ma compréhension limitée m'a fait penser à des façons d'ordonner le chargement des cartes, mais je ne suis pas sûr de savoir où aller ... –

Hmm, que diriez-vous de mettre chaque carte dans un 'iframe' distinct? –

au lieu de le faire:

google.load("visualization", "1", { packages:["map"] }); 
google.setOnLoadCallback(drawChartWest);

essayer ceci:

google.load("visualization", "1", { packages:["map"],callback: drawChartWest});

Source

2013-04-19 16:12:55

Google maps multiples sur une seule page - ne peut charger un seul à la fois

Répondre

Questions connexes