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
No one has answered this question yet
Check out similar questions: