Блог

Главная - Вопросы по программированию - Несколько карт Google на одной странице — можно загружать только по одной за раз

Несколько карт Google на одной странице — можно загружать только по одной за раз

#javascript #html #r

#javascript #HTML #r

Вопрос:

Я очень новичок в HTML и Javascript (менее недели опыта) и застрял в следующей ситуации. Я создал 6 визуализаций карт Google, используя пакет googleVis для R (простые вещи — просто маркеры на карте). Я извлек Javascript из объектов googleVis в R и включил их в простой сайт, который содержит 6 разделов для каждой из 6 разных карт.

Каждый файл Javascript включает функцию для создания объекта JSON, функцию для рисования карты и функцию для отображения карты:

 //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);
}

Каждый файл javascript включает функции и данные для разных регионов страны (например, будут определения для gvisDataMidwest(), givsDataSouthEast() и т. Д.).

Вот примерно так выглядит мой HTML:

 <!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>

ПРОБЛЕМА: с тем, как я в настоящее время собрал этот сайт вместе, если в любом месте сайта вызываются две функции dsplayChart **() (как в этом примере, с displayChartWest() и displayChartMidwest()), все divs отображаются пустыми. Но, если бы я просто включил один из этих вызовов функций, тогда карта нормально отображалась бы в соответствующем div. Каким-то образом вызов двух или более из этих функций приводит к конфликту, хотя я просто не знаю почему. Ваша помощь ОЧЕНЬ ценится. Приветствия, АР

Ответ №1:

Я думаю, вам может потребоваться дождаться загрузки DOM, прежде чем запускать ваши диаграммы. Без использования библиотеки, такой как jQuery, вы могли бы сделать это с помощью события body onload:

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

Комментарии:

1. Я думал, что это может быть что-то вроде этого, но когда я попытался использовать onload в теге body или window.onload или даже включить jQuery и использовать что-то вроде $(document) . ready(), я получил тот же результат.

2. Я попытался загрузить это на другой машине и смог загрузить три карты, но добавление четвертой карты (или четвертого вызова функции displayChart ****()) сломало сайт. Мое ограниченное понимание заставляет меня задуматься о том, как упорядочить загрузку карт, но я не уверен, куда обратиться…

3. Хм, как насчет размещения каждой карты отдельно iframe ?

Ответ №2:

Вместо этого:

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

попробуйте это вместо:

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