Create markers with HTML

You can use custom HTML and CSS to create markers with high visual impact, that can feature interactivity and animation. All Marker3DElement instances are added to the DOM as HTML elements, which you can access using the Marker3DElement property, and manipulate in the same way as any other DOM element.

CSS

@keyframes marker-bounce {
    0% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-12px);
    }
    55% {
        transform: translateY(-5px);
    }
    75% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(-8px);
    }
}

html,
gmp-map-3d {
    height: 100%;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

:root {
    --google-blue: #1a73e8;
    --google-gray: #3c4043;
    --google-silver: #dadce0;
    --google-white: #ffffff;
}

.custom-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background-color: var(--google-white);
    color: var(--google-blue);
    border: 1px solid var(--google-silver);
    border-radius: 20px;
    font-family: 'Google Sans', 'Roboto', Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    box-shadow:
        0 4px 6px rgba(60, 64, 67, 0.1),
        0 1px 3px rgba(60, 64, 67, 0.2);
    white-space: nowrap;
    position: relative;
    cursor: default;
    transition:
        background-color 0.3s ease-in-out,
        box-shadow 0.3s ease-in-out;
    user-select: none;
}

.custom-marker:hover {
    background-color: #f8f9fa;
    box-shadow:
        0 8px 16px rgba(60, 64, 67, 0.2),
        0 2px 4px rgba(60, 64, 67, 0.25);
    animation: marker-bounce 0.5s ease-out forwards;
}

.custom-marker::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--google-silver);
    transition: border-top-color 0.2s ease-in-out;
}

.custom-marker::before {
    content: '';
    position: absolute;
    top: 99%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid var(--google-white);
    z-index: 1;
    transition: border-top-color 0.2s ease-in-out;
}

.custom-marker:hover::after {
    border-top-color: #cacdd2;
}

.custom-marker:hover::before {
    border-top-color: #f8f9fa;
}

HTML

<html>
    <head>
        <title>3D Marker HTML</title>
        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script
            async
            src="https://maps.googleapis.com/maps/api/js?loading=async&key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps3d"></script>
    </head>
    <body>
        <gmp-map-3d
            center="40.7489,-73.9680,0"
            heading="315"
            tilt="65"
            range="800"
            mode="SATELLITE">
            <gmp-marker position="40.7489,-73.9680" title="UN Headquarters">
                <div class="custom-marker">
                    United Nations Secretariat Building
                </div>
            </gmp-marker>
        </gmp-map-3d>
    </body>
</html>

Try Sample