Places UI Kit: A ready-to-use library that provides room for customization and low-code development. Try it out, and share yourinput on your UI Kit experience.

Create markers with HTML

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

Basic marker

This example map shows creating a basic custom marker declaratively.

<html><head><title>3DMap-Declarative</title><style>html,body{height:100%;margin:0;padding:0;}gmp-map-3d{height:100%;}</style></head><body><gmp-map-3dcenter="37.4239163, -122.0947209, 0"tilt="67.5"range="1000"mode="hybrid"><gmp-marker-3dposition="37.4239163, -122.0947209,50"altitude-mode="absolute"extruded="true"label="Basic Marker"></gmp-marker-3d></gmp-map-3d><scriptasyncsrc="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&v=beta&libraries=maps3d"></script></body></html>

Interactive marker

This example shows creating an interactive marker using HTML.

<html><head><title>PureHTMLInteractiveMarkerDemo</title><style>html,body{height:100%;margin:0;padding:0;}gmp-map-3d{height:400px;width:800px;}</style></head><body><gmp-map-3dcenter="37.819852,-122.478549"tilt="75"range="2000"heading="330"mode="hybrid"><gmp-marker-3d-interactiveposition="37.819852,-122.478549,100"></gmp-marker-3d-interactive></gmp-map-3d><scriptasyncsrc="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&v=alpha&libraries=maps3d"></script></body></html>

Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-11-21 UTC.