Databases
StackOverflow2013
Postsdbo
POgoogle maps v3 heatmap not displaying on page load
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POgoogle maps v3 heatmap not displaying on page load
    primarykey
    data
    text
    <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>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USjiraiya
    1. USjiraiya
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COWhat is the value of "this.map"? Is it the same as the global "map"?
      singulars
      1. POgoogle maps v3 heatmap not displaying on page load
      1. USgeocodezip
    2. CO@geocodezip sorry ya its the same one, I just put in the this to see if it was not some scope issue, just a shot in the dark really. The original is just map
      singulars
      1. POgoogle maps v3 heatmap not displaying on page load
      1. USjiraiya
    3. COPlease fix the posted code to reflect the real problem. If that is really "map", not "this.map" then it is probably a timing problem (the map is not initialized until after the heatmap is created). Can you provide a jsfiddle that exhibits the problem (or enough data that we can run your code)?
      singulars
      1. POgoogle maps v3 heatmap not displaying on page load
      1. USgeocodezip
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload