Use markers to display single locations on a map. This page shows how to add a marker to a map programmatically, and by using HTML.
Add a marker using HTML
To add a 3D marker using HTML, add a gmp-marker-3d
child element to the gmp-map-3d
element. The following snippet shows adding markers to a web page:
<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>
Add a marker programmatically
To add a 3D marker to a map programmatically, create a new Marker3DElement
,
passing lat/lng
coordinates and a reference to the basemap, as shown in this
example:
async function init () { // Make sure the Marker3DElement is included. const { Map3DElement , Marker3DElement } = await google . maps . importLibrary ( 'maps3d' ); const map = new Map3DElement ({ center : { lat : 37.4239163 , lng : - 122.0947209 , altitude : 0 }, tilt : 67.5 , range : 1000 , mode : 'SATELLITE' , gestureHandling : 'COOPERATIVE' , }); const marker = new Marker3DElement ({ position : { lat : 37.4239163 , lng : - 122.0947209 , altitude : 50 }, // (Required) Marker must have a lat / lng, but doesn't need an altitude. altitudeMode : 'ABSOLUTE' , // (Optional) Treated as CLAMP_TO_GROUND if omitted. extruded : true , // (Optional) Draws line from ground to the bottom of the marker. label : 'Basic Marker' , // (Optional) Add a label to the marker. }); map . append ( marker ); // The marker must be appended to the map. document . body . append ( map ); } void init ();
