Ufdjrw

I have a Google Map with many markers (yellow circles), and I implemented a tool to draw polygons over the markers. However, the polygon is behind the markers while drawing (and stays behind when complete).

I tried changing the ZIndex in both markers and polygons, but it seems to alter the way in which markers are shown with respect to other markers, and not with respect to polygons. I also tried

polygon.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);

How can I bring the polygon to the front?

This won't solve the problem, but it will explain why the things you tried didn't work.

The Maps API uses several layers known as MapPanes in a fixed Z order:

• 4: floatPane (infowindow)


• 3: overlayMouseTarget (mouse events)


• 2: markerLayer (marker images)


• 1: overlayLayer (polygons, polylines, ground overlays, tile layer overlays)


• 0: mapPane (lowest pane above the map tiles)

So the marker images in layer 2 are always above the polygons in layer 1. When you fiddle with the z-index on the markers, you're just adjusting them relative to each other. That doesn't do any good, because they are all in a layer above the polygons.

What can you do about this? The only solution I can think of is to create your own OverlayView for the polygons or the markers so you can put them in the MapPane you want.

Are your markers clickable, or are they just static images? If they aren't clickable, you could possibly get away with drawing them yourself in the mapPane. Then your polygons would be above them. Or the opposite: you could draw the polygons yourself in one of the higher layers, maybe in floatShadow.

The problem then is you have to do all of your own drawing, either with a canvas element or with DOM images. And your own mouse hit testing too if they are clickable.

There aren't a lot of good OverlayView examples out there, but I'll mention one of my own: a little library I wrote a while ago called PolyGonzo, where the polygonzo.js file has the OverlayView implementation. The code isn't great - I threw it together in too much of a hurry - but it may help give you some ideas.

I know this question is old but for future users I wanna share my approach:

Shapes with higher zIndex values displaying in front of those with lower values. For this example I am using Polygon but is similar for other shapes:

var globalZIndex = 1; //Be sure you can access anywhere
//... Other instructions for creating map, polygon and any else
polygon.setOptions( zIndex: globalZIndex++ );

Notice that markers have a method setZIndex(zIndex:number).

Hello for me A found this solution

for Create Symbol

var lineSymbol = 
 path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
 strokeColor: '#181727',
 fillColor: '#50040B', 

 ;

 var dashedSymbol = 
 path: 'M 0,-1 0,1',
 strokeOpacity: 1,
 scale: 4

 ;

 [![function MakeMarker(pinColor)" + pinColor,
 new google.maps.Size(21, 34),
 new google.maps.Point(0,0),
 new google.maps.Point(10, 34));

 return pinImage;

 ][1]][1]

FlowMarkersdashed(new google.maps.LatLng(positionorigin[0], positionorigin[1]),
 new google.maps.LatLng(positiondestination[0], positiondestination[1]), myObject[i]['flowfluxphysique'][j]['colorFlux'], dashedSymbol, j);

 function FlowMarkersdashed(latlngOrgin, latlngDest, ColorFlow, Symbol, indexvar)

 var flightPlanCoordinates = [
 latlngOrgin,
 lat: latlngOrgin.lat() + (indexvar) * 2, lng: latlngOrgin.lng(),
// lat: -18.142, lng: 178.431,
 latlngDest,
 ];
 var line = new google.maps.Polyline(
 path: flightPlanCoordinates,
 strokeOpacity: 0,
 icons: [
 icon: Symbol,
// offset: '100%',
 offset: '0',
 repeat: '20px'

// repeat: '20px'
 ],
 strokeColor: "#"+ColorFlow,
 geodesic: true,

// editable: true,

 map: map
 );
 

And For Create a Flow Marker Simple

FlowMarkers(new google.maps.LatLng(positionorigin[0], positionorigin[1]),
 new google.maps.LatLng(positiondestination[0], positiondestination[1]), myObject[i]['flowfluxinformation'][j]['colorFlux'], lineSymbol,j);


function FlowMarkersdashed(latlngOrgin, latlngDest, ColorFlow, Symbol, indexvar)

 var flightPlanCoordinates = [
 latlngOrgin,
 lat: latlngOrgin.lat() + (indexvar) * 2, lng: latlngOrgin.lng(),
// lat: -18.142, lng: 178.431,
 latlngDest,
 ];
 var line = new google.maps.Polyline(
 path: flightPlanCoordinates,
 strokeOpacity: 0,
 icons: [
 icon: Symbol,
// offset: '100%',
 offset: '0',
 repeat: '20px'

// repeat: '20px'
 ],
 strokeColor: "#"+ColorFlow,
 geodesic: true,

// editable: true,

 map: map
 );
 

And Finally this is my result

Change this method call:

polygon.setZIndex(google.maps.Marker.MAX_ZINDEX + 1); 

to this:

polygon.setZIndex(4);