3d-marker-html

Sample code supporting Google Maps Platform JavaScript API documentation. author(s): Geo Developer IX Documentation Team

HTML

<!doctype html>
<!--
 @license
 Copyright 2026 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->

<html>
  <head>
    <title>3D Marker HTML</title>
    <script
      async
      src="https://maps.googleapis.com/maps/api/js?loading=async&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>

CSS

/*
 * @license
 * Copyright 2026 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */

@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:...

JavaScript

'use strict';
/*
 * @license
 * Copyright 2026 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */