title: google maps v3 heatmap not displaying on page load
body: <p>I have a mapping page which retrieves a json response and creates the relevant array of points to load a heatmap.</p>
  
  <p>All of this is in the required initialize query which is loaded is called in a jquery document.ready.</p>
  
  <p>Here is the strange thing though, all the external data is returning fine and being populated fine, the points array is fine also.</p>
  
  <p>However when I call the setMap(map) method on the heatmap it does not display. But weirdly if I use an on page link to toggle it on or off it will display. Any ideas?? No errors at all in firebug.</p>
  
  <pre><code>var map;
      var markers = [];
      var markerLatLngArray = [];
  
  
  function toggleHeatmap() {
      heatmap.setMap(heatmap.getMap() ? null : map);
  }
  
  function initialize() {
  
  var map_options = {
  center: new google.maps.LatLng(53.4902, -7.96),
  zoom: 7,
  mapTypeId: google.maps.MapTypeId.TERRAIN,
  draggableCursor: 'crosshair',
  mapTypeControl: true,
  scaleControl: true,
  streetViewControl: false,
  overviewMapControl: false,
  overviewMapControlOptions: {
    opened: false
      }
  };
  
  map = new google.maps.Map(document.getElementById('map_canvas'), map_options);
  google.maps.event.addListenerOnce(map, 'idle', function(){
  document.getElementById('ajax_loading_icon').style.display = "none";
  document.getElementById('map_canvas').style.visibility = "visible"; 
  });
  
  
      jQuery.get("&lt;?php echo $data_url; ?&gt;", {}, function(data) {
      jQuery(data).find("marker").each(function() {
      var marker = jQuery(this);
  
      var latlng = new google.maps.LatLng(parseFloat(marker.attr("lat")),
                              parseFloat(marker.attr("long")));
  
      markerLatLngArray.push(latlng);
  
      });
  
  
      });   
  
  
      pointArray = new google.maps.MVCArray(markerLatLngArray);
  
      heatmap = new google.maps.visualization.HeatmapLayer({
      data: pointArray
      });
  
      heatmap.setMap(map);
  
  }
  </code></pre>