3

I have 3 layers on a Google Maps map. The first is a set of polygons. The second is a set of markers. The third is a heatmap.

I'm using the following script libraries

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=visualization"></script> 
<script src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['intensitymap']}]}"></script>

I start with a Map object.

var MAP = new google.maps.Map(document.getElementById('map-canvas'), 
{
    zoom : 5,
    center : new google.maps.LatLng(-25.610111, 134.354806),
    mapTypeId : google.maps.MapTypeId.ROADMAP
});

followed by the polygons

var  polygons = new google.maps.FusionTablesLayer({
     query : {
       select : 'Polygons',
       from : 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' 
     },
    map : MAP,
    suppressInfoWindows : true});

followed by the Markers, one of which is 

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(-28.8, 152.5),
  map: MAP,
  icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
  title: "Tabulam"});

followed by the heatmap (abbreviated)

var heatmapLayer = new google.maps.visualization.HeatmapLayer();
var heatData = [
{location: new google.maps.LatLng(-30.3, 153.1), weight: 102}]
heatmapLayer.setData(heatData);
heatmapLayer.setOptions({opacity:1, radius:50});
heatmapLayer.setMap(MAP);

All that wrapped in a function and called with

google.maps.event.addDomListener(window, 'load', initialize);

The problem that I have is that the heatmap is obscured behind the polygons. How do I bring it forward? Alternatively, how do I push the polygons right to the back?

bugmagnet
  • 7,631
  • 8
  • 69
  • 131
  • 1
    Seems like you can not do it yet, even [people has been asking it for years](https://code.google.com/p/gmaps-api-issues/issues/detail?id=3741&q=layer%20z-index&colspec=ID%20Type%20Status%20Introduced%20Fixed%20Summary%20Stars%20ApiType%20Internal). I saw some posts suggested changing the order, or even add time delay between setting the lay to the map, but I modified the samples and create this fiddle in which you can toggle the 2 things manually, and the results seems to indicate that the order does not matter http://jsfiddle.net/ctbv3rra/1/ – kaho Jul 23 '15 at 18:24
  • 1
    There is a [zIndex in the KmlLayerOptions object](https://developers.google.com/maps/documentation/javascript/3.exp/reference#KmlLayerOptions), just not in [FusionTablesLayerOptions](https://developers.google.com/maps/documentation/javascript/3.exp/reference#FusionTablesLayerOptions) or [HeatmapLayerOptions](https://developers.google.com/maps/documentation/javascript/3.exp/reference#HeatmapLayerOptions) – geocodezip Jul 23 '15 at 22:19

0 Answers0