Stay organized with collectionsSave and categorize content based on your preferences.
You can use custom HTML and CSS to create 3D markers with high visual impact,
that can feature interactivity and animation. AllMarker3DElementinstances
are added to the DOM as HTML elements, which you can access using theMarker3DElementproperty, and manipulate in the same way as any other DOM
element.
Basic marker
This example map shows creating a basic custom marker declaratively.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-09-04 UTC."],[],[],null,["\u003cbr /\u003e\n\n| This product or feature is in Preview (pre-GA). Pre-GA products and features might have limited support, and changes to pre-GA products and features might not be compatible with other pre-GA versions. Pre-GA Offerings are covered by the [Google\n| Maps Platform Service Specific Terms](https://cloud.google.com/maps-platform/terms/maps-service-terms). For more information, see the [launch stage\n| descriptions](/maps/launch-stages).\n\n\u003cbr /\u003e\n\nYou can use custom HTML and CSS to create 3D markers with high visual impact,\nthat can feature interactivity and animation. All `Marker3DElement` instances\nare added to the DOM as HTML elements, which you can access using the\n`Marker3DElement` property, and manipulate in the same way as any other DOM\nelement.\n\nBasic marker\n\nThis example map shows creating a basic custom marker declaratively. \n\n \u003chtml\u003e\n \u003chead\u003e\n \u003ctitle\u003e3D Map - Declarative\u003c/title\u003e\n \u003cstyle\u003e\n html,\n body {\n height: 100%;\n margin: 0;\n padding: 0;\n }\n gmp-map-3d {\n height: 100%;\n }\n \u003c/style\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cgmp-map-3d center=\"37.4239163, -122.0947209, 0\" tilt=\"67.5\" range=\"1000\" mode=\"hybrid\"\u003e\n \u003cgmp-marker-3d position=\"37.4239163, -122.0947209,50\" altitude-mode=\"absolute\" extruded=\"true\" label=\"Basic Marker\"\u003e\u003c/gmp-marker-3d\u003e\n \u003c/gmp-map-3d\u003e\n \u003cscript async\n src=\"https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&v=beta&libraries=maps3d\"\u003e\u003c/script\u003e\n \u003c/body\u003e\n \u003c/html\u003e\n\nInteractive marker\n\nThis example shows creating an interactive marker using HTML. \n\n \u003chtml\u003e\n \u003chead\u003e\n \u003ctitle\u003ePure HTML Interactive Marker Demo\u003c/title\u003e\n \u003cstyle\u003e\n html,\n body {\n height:100%;\n margin: 0;\n padding: 0;\n }\n gmp-map-3d {\n height: 400px;\n width: 800px;\n }\n \u003c/style\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cgmp-map-3d center=\"37.819852,-122.478549\" tilt=\"75\" range=\"2000\" heading=\"330\" mode=\"hybrid\"\u003e\n \u003cgmp-marker-3d-interactive position=\"37.819852,-122.478549,100\"\u003e\u003c/gmp-marker-3d-interactive\u003e\n \u003c/gmp-map-3d\u003e\n \u003cscript async src=\"https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&v=alpha&libraries=maps3d\"\u003e\n \u003c/script\u003e\n \u003c/body\u003e\n \u003c/html\u003e"]]
