Change the z-order of Google Maps layers

I have 3 layers in google maps. The first is a set of polygons. The second is a set of markers. The third is a heat map.

I am 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 am starting 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 polygons

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

      

followed by markers, one of which

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 a heat map (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);

      

Anything wrapped in a function and called with

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

      

The problem I have is that the heatmap is hiding behind the polygons. How to do it? Alternatively, how do I push the polygons straight to the back?

+3


source to share





All Articles