How do I control what layer a marker is on google maps Javascript?

Question

I am sure this question is answered already but I cannot find it. How to I change the marker layer of a marker on google maps v3 Javascript api?

For example in the image below I want the bus icon to appear above all T icons.

My bus icon is made like this:

  var image = {
    url: getIconUrl(bus.num),
    anchor: new google.maps.Point(30,30)
  };
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(bus.Latitude, bus.Longitude),
    map: $scope.map, 
    animation: google.maps.Animation.DROP,
    icon: image
  });

My T icon is made like this:

  var image = {
    url: stopIcon
  };
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(stop.Latitude, stop.Longitude),
    map: $scope.map,
    icon: image
  });

The bus is always made after the T because T is stored locally where as bus is live data and served on demand.

Answer 1

You can control with z-index option.

  var image = {
    url: getIconUrl(bus.num),
    anchor: new google.maps.Point(30,30)
  };
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(bus.Latitude, bus.Longitude),
    map: $scope.map, 
    animation: google.maps.Animation.DROP,
    icon: image,
    zIndex: google.maps.Marker.MAX_ZINDEX // <--
  });

Answer 2

you can set zIndex as per need for your marker

like:

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(stop.Latitude, stop.Longitude),
    map: $scope.map,
    icon: image,
    zIndex: 1// as needed
  });

Or you can change it using setZIndex() method:

var marker = new google.maps.Marker({
        position: new google.maps.LatLng(stop.Latitude, stop.Longitude),
        map: $scope.map,
        icon: image
      });

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