Google Maps infowindow content disappears on reload. What could be causing this?

问题

I have Javascript that reads in data from a csv to display as infowindow content on 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);
    }
}

Where 'data' is the csv file contents read in using a jQuery csv plugin and maxmap is a Google map object. To avoid loop closure issues, I made an array of infowindows and set the options inside of that inner function.

Sometimes, and it seems to happen randomly, I get populated infowindows right where I want them. No problem. In other cases, I get some infowindows showing content, but not all. However, most times I get un-populated (no content) infowindows, albeit still in the right places. I am always able to console.log the infowindow content and associated index, so I know the content is being assigned...it's just not showing up in the infowindows every time. Does anyone know how I can get the content to show up every time and what is causing it to disappear?

Working: yep

Not working: nope

Kind-of working: Kind of working

UPDATE

After hearing from you both I added some deferred objects to make sure the map initializes before I call the infowindow-making code:

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

In the maxValuesMap, I only added iWindows[ind].setMap(maxmap), like geocodezip suggested. Despite these changes, I'm still having the same issue. The fact that you all pointed out it's a timing issue is a big help, though.

回答1:

With a few minor changes, your updated code works fine with JSON generated data. See if the changes and fiddle below will help.

Otherwise, the problem may be with the CSV plugin, so please share more details.

Here are the changes I made:

Delayed initialization until DOM loads
Fixed comma after var d = new $.Deferred(),
took out var declarations out of loop for reuse

Here's the working jsfiddle.

I hope this helps!

回答2:

Seems like a race condition; sometimes your infowindows appear to be filled before the map is done loading. Have you tried using a callback? You can do that by appending &callback=callbackFunction to your Google Maps URL, then do something like

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

回答3:

The first time your content is loaded the .csv is transferred from the server, which takes time and completes after your map has been initialized. The second time it is served from the cache, and completes before the map has been initialized.

Options to fix the problem:

call the maxValuesMap function from the function that initializes the map, so the map is initialized first (you didn't provide that code).
process through the iWindows array after initializing the map, calling setMap on each infowindow.

来源：https://stackoverflow.com/questions/26103180/google-maps-infowindow-content-disappears-on-reload-what-could-be-causing-this

标签

javascript

jquery

google-maps

csv

infowindow