Is there a way to set the z-index of one map marker out of multiple markers?

Question

I'm trying to figure out how to target map markers to custom their z-index so they are always on the bottom. Right now some covering up other map markers that are more important.

I created a custom post type called "Locations" and Im using advanced custom fields so I am not creating each location manually so I can't just set the z-index in the javascript manually as most solutions show.

This is what I have so far. The start of this code I got off of the acf website:

(function ($) {

function new_map($el) {
    var $markers = $el.find('.marker');
    var args = {
        zoom: 14,
        center: new google.maps.LatLng(0, 0),
        scrollwheel: false,
        navigationControl: false,
        mapTypeControl: false,
        scaleControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    };

    var map = new google.maps.Map($el[0], args);
    map.markers = [];
    map.infowindows = [];

    // add markers
    $markers.each(function () {
        add_marker($(this), map);
    });

    center_map(map);
    return map;
}

function center_map(map) {

    var bounds = new google.maps.LatLngBounds();

    $.each(map.markers, function (i, marker) {
        var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng());
        bounds.extend(latlng);
    });

    if (map.markers.length == 1) {
        map.setCenter(bounds.getCenter());
        map.setZoom(14);
    } else {
        map.fitBounds(bounds);
    }
}

function add_marker($marker, map) {

    var path = '';
    if(window.location.hostname == 'localhost'){
        path = '/go-dental-365-wordpress-theme';
    }

    // var
    var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng'));
    var base = path + '/wp-content/themes/go-dental-365/assets/images/';
    // var area = new ($marker.attr('data-area'));
    // create marker
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: base + 'non-active-pin.png',
        category: $marker.attr('data-area'),
        clickable: false
    });

    // add to array
    map.markers.push(marker);

    if(marker.category == 'supported-offices'){
        marker.setZIndex(100);
    }

    // if marker contains HTML, add it to an infoWindow
    if ($marker.html()) {

        // create info window
        var infowindow = new google.maps.InfoWindow({
            content: $marker.html()
        });

        map.infowindows.push(infowindow);

        // show info window when marker is clicked
        google.maps.event.addListener(marker, 'click', function () {
            for (var i = 0; i < map.infowindows.length; i++) {
              map.infowindows[i].close();
            }
            infowindow.open(map, marker);
        });
    }

// Control Map Pin state
    $('.locations-nav-container > div').on('click', function(e){
        e.preventDefault();
        var nav = $(this).attr('data-nav');
        var infowindow;

        $('div').removeClass('active');
        $(this).addClass('active');

        for (var i = 0; i < map.infowindows.length; i++) {
          map.infowindows[i].close();
        }

        for (var j = 0; j < map.markers.length; j++) {
            map.markers[j].setIcon(base + 'non-active-pin.png');
            map.markers[j].setClickable(false);
            if(map.markers[j].category == nav || nav == 'view-all'){
                if(map.markers[j].category == 'supported-offices'){
                    map.markers[j].setIcon(base + 'supporting-pin.png');
                } else {
                    map.markers[j].setIcon(base + 'available-pin.png');
                }
                map.markers[j].setClickable(true);
            }
        }

    });
}

var map = null;

$(document).ready(function () {
    $('.map').each(function () {
        map = new_map($(this));
    });
    $('.locations-nav-container > div:first-child').trigger('click');
});
})(jQuery);

The map markers that have the category of "supported-offices" are the ones I want to always be on the bottom of all other map markers. The code works when the map is first loaded but as soon as you move the map the markers switch. I know by default that google will display the markers that are at the bottom of the map on top of the other markers so that might have something to do with it. But how do I override that?

Here is the map when it is first loaded

Here is the map when you move it

The pins with the dot are the ones I want to be placed behind the other markers.

Answer 1

This is the answer

if(marker.category == 'supported-offices'){
    marker.setZIndex(google.maps.Marker.MAX_ZINDEX - 1);
} else {
    marker.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
}