.map-container {
    position: relative;
    width: 100%;
/*    max-width: 900px;*/
}
.map-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}
#map-image {
    width: 100%;
    height: auto;
    display: block;
}
@keyframes signal {
    0% {
        transform: scale(1);
        opacity: 0.4;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

.marker-image {
    z-index: 2;  /* чтобы маркер всегда был поверх сигнала */
}

.map-marker::before, .map-marker::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;  /* Добавляем это для центрирования */
    width: 32px;  /* равно ширине вашего изображения маркера */
    height: 32px; /* равно высоте вашего изображения маркера */
    background-color: rgba(255, 255, 255, 0.3); /* цвет сигнала */
    border-radius: 50%;
    transform: scale(1);
    opacity: 0;
    z-index: 1;
    animation: signal 2.5s infinite;
    transform-origin: center;
}

.map-marker::after {
    animation-delay: 0.75s; /* задержка, чтобы создать эффект последовательных волн */
}
.map-marker {
    position: absolute;
    transform: translate(-50%, -100%);
    cursor: pointer;
    z-index: 1;
}

.marker-image {
    width: 22px;   /* или другой размер, который вам подходит */
    height: auto;
    display: block;
    z-index: 3;
}
.tooltip {
    visibility: hidden;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 10px;
    border-radius: 6px;
    position: absolute;
    z-index: 5;
    bottom: 125%; /* Позиционирование подсказки над маркером */
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.map-marker:hover .tooltip {
    visibility: visible;
    opacity: 1;
}