Specify the z-index of Google Map Markers
Solution 1
By default map will make z-index higher for markers lower on the map so they visibly stack top to bottom
You can set zIndex
option for a marker. You would just need to create a increment zIndex counter as you add markers and add that to the marker options object:
marker=new google.maps.Marker({
position:pin,
icon:markerIcon,
zIndex: counterValue
});
I'm not quite sure what the base start value needs to be
Solution 2
You have to set the marker option "optimized" to false in combination with the zIndex option.
var marker=new google.maps.Marker({
position:pin2,
optimized: false,
zIndex:99999999
});
This should solve your problem.
Solution 3
Problem solved. Just set the zValue to 999 (I'm guessing higher will bring it more to the top) and it should come to the top. I guess the default is below 999:
var zValue;
if (someCondition) {
zValue = 999;
}
var marker = new google.maps.Marker({
map: map,
position: {lat: lat, lng: lng},
title: titleString,
icon: image,
zIndex: zValue
});
Solution 4
Take care that as it says in the google map documentation the z-index of a circle will be compared to the z-index of other polygons and not to the z-index of the markers.
ATOzTOA
Programming is my passion... any programming language, you name it, I have used it... well except SmallTalk... Site: www.atoztoa.info Email: [email protected] SOreadytohelp
Updated on July 09, 2022Comments
-
ATOzTOA almost 2 years
I am having a Google Map with lots of markers added using websockets. I am using custom marker images based on data availability. I want to make sure the newest marker stays on top of all other elements in the map.
How do I do this?
Code:
circleIcon = { path: google.maps.SymbolPath.CIRCLE, fillColor: "blue", fillOpacity: 1, scale: 2, strokeColor: "red", strokeWeight: 10 }; coordinates = image[2].split(','); pin=new google.maps.LatLng(coordinates[0], coordinates[1]); if(marker) { marker.setMap(null); } if(image[0] != "NOP") { var markerIcon = circleIcon; } else { var markerIcon = image_car_icon; } marker=new google.maps.Marker({ position:pin, icon:markerIcon }); marker.setMap(map); map.setCenter(marker.getPosition());
Update
I am using jquery to update the z-index of the InfoWindow, like:
popup = new google.maps.InfoWindow({ content:'<image id="pin_' + pin_count + '" src="data:image/png;base64,' + image[1] +'"/>', }); popup.open(map, marker); google.maps.event.addListener(popup, 'domready', function() { console.log("DOM READY..........................."); // Bring latest Image to top e = $('#pin_' + pin_count).parent().parent().parent().parent(); e.css({ 'z-index' : 99999 + pin_count, }); });
Maybe that's why the marker shows behind the InfoWindow. I tried updating using zIndex, but the marker still shows behind the InfoWindow:
marker=new google.maps.Marker({ position:pin, zIndex: 9999999 + pin_count, icon:markerIcon });
Update
Sample code. I expect the "green circle" icon marker to be behind the "pin" icon marker.
<!DOCTYPE html> <html> <head> <script src="http://maps.googleapis.com/maps/api/js?key=&sensor=false"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script> var london = new google.maps.LatLng(51.508742,-0.120850); function initialize() { var pin1=new google.maps.LatLng(51.508742, -0.120850); var pin2=new google.maps.LatLng(51.508642, -0.120850); var mapProp = { center:pin1, zoom:17, disableDefaultUI:true, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); var marker=new google.maps.Marker({ position:pin2, zIndex:99999999 }); marker.setMap(map); var infowindow = new google.maps.InfoWindow({ content:"Hello World!" }); infowindow.open(map,marker); circleIcon = { path: google.maps.SymbolPath.CIRCLE, fillColor: "blue", fillOpacity: 1, scale: 2, strokeColor: "green", strokeWeight: 10 }; var marker2=new google.maps.Marker({ position:pin1, icon:circleIcon, zIndex:99999 }); marker2.setMap(map); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="googleMap" style="width:500px;height:380px;"></div> </body> </html>
-
ATOzTOA over 11 yearsI tried that, didn't work for me... I have updated the question.
-
charlietfl over 11 yearscan you create a few markers worth of data and put a demo in jsfiddle.net?
-
ATOzTOA over 11 yearsMy whole data is coming from server, so creating a jsfiddle is gonna be tough.
-
charlietfl over 11 yearsjust something simple with a few markers close enough together to see the issue and code you are using. Only need about 3 or 4 markers
-
ATOzTOA over 11 yearsjsfiddle seems to have some issues, I have added the sample code in the question itself.
-
ATOzTOA over 9 yearsIt will assign 999 to all windows, which won't mean anything.
-
Mateaș Mario over 8 yearsThanks for the great tip. "optimized: false," is the key.
-
Luke W almost 8 yearszIndex worked for me. didn't need optimized prop. I set zIndex to Date.now() on each iteration, for a group of markers, to keep the last on top.
-
Mathieu Dhondt over 6 yearsThat Date.now() suggestion is a great idea. I was looking for a way to make sure a certain infowindow was always on top and this'll certainly do it.
-
andrewb almost 6 yearsI required
optimized: false
for all, maybe due to me using some svg icons which requireopmtimized: false
?