Отображение только карт-карт Google Maps в некоторых браузерах

У меня довольно сложная проблема с слоем карты Google Maps: он отлично отображается в Firefox, но отказывается это делать в Chrome или Safari.Отображение только карт-карт Google Maps в некоторых браузерах

Демонстрация: http://dev.nomad.cm/projects/maps/map.html

Ни Chrome, ни Safari бросает какие-либо ошибки в консоли, так что я на самом деле не имеют ничего конкретного, чтобы пойти дальше. Я подозреваю, что возможно ограничение памяти: JSON из lat/long points, который я загружаю, составляет ~ 150 000 элементов. Тем не менее, если бы это было проблемой, я бы подумал, что ошибка будет поднята.

Очень простой код (включая скелет HTML):

<html> 
<head> 
<title>Heatmap Test</title> 
<style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0; padding: 0 } 
    #map_canvas { height: 100% } 
</style> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization"></script> 
<script type="text/javascript"> 

    $.ajaxPrefilter("json script", function(options) { 
     options.crossDomain = true; 
    }); 

    function initialize() { 
     var mapOptions = { 
      center: new google.maps.LatLng(44.5403, -78.5463), 
      zoom: 5, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var infoWindow = new google.maps.InfoWindow(); 
     var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
     var layoffLocs = new Array(); 
     $.getJSON('map_points.json', function(data) { 
      $.each(data.points, function(i, value) { 
       layoffLocs.push(new google.maps.LatLng(value.lat, value.lon)); 
      }); 
     }); 
     var pointArray = new google.maps.MVCArray(layoffLocs); 
     var heatmap = new google.maps.visualization.HeatmapLayer({ 
      data: pointArray 
     }); 
     heatmap.setMap(map); 
     // google.maps.event.addDomListener(window, 'load', initialize); 
    } 

</script> 
</head> 
<body onload="initialize()"> 
<div id="map_canvas" style="width: 800px; height: 600px"></div> 
</body> 
</html>

Пример выдержки из JSON:

{ 
"points":[ 
    {"lat":40.025312,"lon":-83.091194}, 
    {"lat":40.754308,"lon":-84.081579}, 
    {"lat":40.141624,"lon":-82.978615}, 
    {"lat":39.416894,"lon":-81.429982}, 
    {"lat":39.450391,"lon":-84.476614} 
] 
}

Любые идеи с благодарностью. Благодаря!

источник

2014-05-02 Alex Warofka

Похоже, вы пытаетесь отобразить тепловую карту до того, как данные загрузились. Вы не должны делать это в функции обратного вызова нагрузки JSon, что-то вроде:

$.getJSON('map_points.json', function(data) { 
     $.each(data.points, function(i, value) { 
      layoffLocs.push(new google.maps.LatLng(value.lat, value.lon)); 
     }); 

     var pointArray = new google.maps.MVCArray(layoffLocs); 
     var heatmap = new google.maps.visualization.HeatmapLayer({ 
      data: pointArray 
     }); 
     heatmap.setMap(map); 
});

источник

2014-05-02 04:19:53 kevmc

Я чувствую себя невероятно глупо прямо сейчас. Я настолько увлекся тем, что (по какой-то причине) он работал в Firefox, но не в Chrome, что я полностью пропустил эту очевидную ошибку. Спасибо! –

Отображение только карт-карт Google Maps в некоторых браузерах

ответ

Смежные вопросы