Информационное окно Google Maps исчезает при перезагрузке. Что может быть причиной этого?

Question

У меня есть Javascript, который считывает данные из CSV для отображения в качестве информационного окна на Google Maps:

// Create a map of maximum predicted value and time of that prediction
function maxValuesMap(data,maxmap) {
    var dataStr = new String(data),
        stations = $.csv.toObjects(dataStr),
        iWindows = [];

    for (var i=0;i<stations.length;i++) {
        var st = stations[i]['Station'],
            ts = stations[i]['Time'],
            max = stations[i]['Max'],
            lat = stations[i]['Lat'],
            lon = stations[i]['Lon'];

        var windowLatLng = new google.maps.LatLng(lat,lon);

        iWindows.push(new google.maps.InfoWindow());
        (function (ind,max,maxmap,ts,windowLatLng) {
            iWindows[ind].setOptions ({
                content: '<p>Max: '+max+'<br>Time: '+ts+'</p>',
                position: windowLatLng
            });
            console.log(iWindows[ind].content);
            console.log(ind);
            iWindows[ind].open(maxmap);
        })(i,max,maxmap,ts,windowLatLng);
    }
}

Где data - это содержимое файла csv, считываемое с использованием плагина jQuery csv, а maxmap - объект карты Google. Чтобы избежать проблем с замыканием цикла, я создал массив информационных окон и установил параметры внутри этой внутренней функции.

Иногда, и кажется, что это происходит случайно, я заполняю информационные окна именно там, где я хочу. Нет проблем. В других случаях я получаю некоторые информационные окна, показывающие контент, но не все. Тем не менее, в большинстве случаев я получаю незаполненные (без содержимого) информационные окна, хотя все еще в нужных местах. У меня всегда есть возможность console.log содержимого информационного окна и связанного с ним индекса, поэтому я знаю, что контент назначается... он просто не появляется в информационных окнах каждый раз. Кто-нибудь знает, как я могу заставить контент показываться каждый раз и что вызывает его исчезновение?

За работой:

Не работает:

Вид работы:

ОБНОВИТЬ

Выслушав вас обоих, я добавил несколько отложенных объектов, чтобы убедиться, что карта инициализируется перед вызовом кода создания информационного окна:

// Populate tab maps
var d = new $.Deferred(),
loadTabMaps('maxmap',[39.811,-97.98],4,d);
$.when(d)
    .done(function(maxmap) {
        mapStations(maxmap);
     });

// initialize maps
function loadTabMaps(mapdiv,ltln,zl,d) {
  var latlng = new google.maps.LatLng(ltln[0],ltln[1]),
    options = {
      center: latlng,
      mapTypeId: google.maps.MapTypeId.TERRAIN,
      zoom: zl
    }
  maxmap = new google.maps.Map(document.getElementById(mapdiv),options);
  d.resolve(maxmap);
}

// Get csv data and call maxValuesMap on success
function mapStations(maxmap) {
    // Populate the max values map
    $.get('../../datafiles/maxVals.csv',function(data) {
        maxValuesMap(data,maxmap);  // This is almost the original code above.
    });
}

В maxValuesMap я добавил только iWindows[ind].setMap(maxmap), как предложил geocodezip. Несмотря на эти изменения, у меня все та же проблема. Тот факт, что вы все указали, что это проблема времени, очень помогает.

Answer 1

С некоторыми незначительными изменениями ваш обновленный код прекрасно работает с данными, сгенерированными JSON. Посмотрите, помогут ли изменения и скрипка ниже.

В противном случае проблема может быть связана с плагином CSV, поэтому, пожалуйста, поделитесь более подробной информацией.

Вот изменения, которые я сделал:

1. Задержка инициализации до загрузки DOM

2. Исправлена ​​запятая после var d = new $.Deferred(),

3. вынул var объявления из цикла для повторного использования

Вот рабочий jsfiddle.

Надеюсь, это поможет!

Answer 2

При первой загрузке вашего контента.csv передается с сервера, что занимает много времени и завершается после инициализации вашей карты. Второй раз он подается из кэша и завершается до инициализации карты.

Варианты решения проблемы:

1. вызовите функцию maxValuesMap из функции, которая инициализирует карту, поэтому карта инициализируется первой (вы не предоставили этот код).

2. обработайте массив iWindows после инициализации карты, вызывая setMap для каждого информационного окна.

Answer 3

Похоже на состояние гонки; иногда ваши информационные окна заполняются до того, как загрузка карты завершится. Вы пытались использовать обратный звонок? Вы можете сделать это, добавив &callback=callbackFunction на свой URL-адрес в Картах Google, затем сделайте что-то вроде

function callbackFunction() {
    // Insert the logic that calls your maxValuesMap function
    maxValuesMap(data, maxmap);
}