Get a Maps Demo Key: Try out select Maps JavaScript API and Places UI Kit features at no cost with a Maps Demo Key—no billing information required.

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

@keyframesmarker-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:8px16px;
background-color:var(--google-white);
color:var(--google-blue);
border:1pxsolidvar(--google-silver);
border-radius:20px;
font-family:'Google Sans','Roboto',Arial,sans-serif;
font-size:14px;
font-weight:600;
box-shadow:
04px6pxrgba(60,64,67,0.1),
01px3pxrgba(60,64,67,0.2);
white-space:nowrap;
position:relative;
cursor:default;
transition:
background-color0.3sease-in-out,
box-shadow0.3sease-in-out;
user-select:none;
}
.custom-marker:hover{
background-color:#f8f9fa;
box-shadow:
08px16pxrgba(60,64,67,0.2),
02px4pxrgba(60,64,67,0.25);
animation:marker-bounce0.5sease-outforwards;
}
.custom-marker::after{
content:'';
position:absolute;
top:100%;
left:50%;
transform:translateX(-50%);
width:0;
height:0;
border-left:8pxsolidtransparent;
border-right:8pxsolidtransparent;
border-top:8pxsolidvar(--google-silver);
transition:border-top-color0.2sease-in-out;
}
.custom-marker::before{
content:'';
position:absolute;
top:99%;
left:50%;
transform:translateX(-50%);
width:0;
height:0;
border-left:7pxsolidtransparent;
border-right:7pxsolidtransparent;
border-top:7pxsolidvar(--google-white);
z-index:1;
transition:border-top-color0.2sease-in-out;
}
.custom-marker:hover::after{
border-top-color:#cacdd2;
}
.custom-marker:hover::before{
border-top-color:#f8f9fa;
}style.css

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=GOOGLE_MAPS_API_KEY&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>index.html

Create markers with HTML Stay organized with collections Save and categorize content based on your preferences.

CSS

HTML

Create markers with HTML