114
rated 0 times
[
115]
[
1]
/ answers: 1 / hits: 80307
/ 12 Years ago, tue, december 25, 2012, 12:00:00
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>
More From » jquery
