Aggiungere un indicatore a una mappa 3D
Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
Seleziona la piattaforma:
Android
iOS
JavaScript
Utilizza gli indicatori per visualizzare singole località su una mappa. Questa pagina mostra come aggiungere un
indicatore a una mappa in modo programmatico e utilizzando HTML.
Aggiungere un indicatore utilizzando l'HTML
Per aggiungere un indicatore 3D utilizzando HTML, aggiungi un elemento secondario gmp-marker-3d
all'elemento gmp-map-3d
. Il seguente snippet mostra l'aggiunta di indicatori a una pagina web:
<gmp-map-3d
mode="hybrid"
center="48.861000,2.335861"
heading="110"
tilt="67.5"
range="1000"
style="height:400px"
>
<gmp-marker-3d
position="48.861000,2.335861">
</gmp-marker-3d>
</gmp-map-3d>
Aggiungere un indicatore in modo programmatico
Per aggiungere un indicatore 3D a una mappa in modo programmatico, crea un nuovo Marker3DElement
,
passando le coordinate lat/lng
e un riferimento alla basemap, come mostrato in questo
esempio:
const marker = new Marker3DElement({
position: {lat: 47.6093, lng: -122.3402}, // (Required) Marker must have a lat/lng.
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.
Passaggi successivi
Salvo quando diversamente specificato, i contenuti di questa pagina sono concessi in base alla licenza Creative Commons Attribution 4.0, mentre gli esempi di codice sono concessi in base alla licenza Apache 2.0. Per ulteriori dettagli, consulta le norme del sito di Google Developers. Java è un marchio registrato di Oracle e/o delle sue consociate.
Ultimo aggiornamento 2025-07-22 UTC.
[null,null,["Ultimo aggiornamento 2025-07-22 UTC."],[],[],null,["Select platform: [Android](/maps/documentation/maps-3d/android-sdk/add-a-marker \"View this page for the Android platform docs.\") [iOS](/maps/documentation/maps-3d/ios-sdk/add-a-marker \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/3d/marker-add \"View this page for the JavaScript platform docs.\")\n\n\u003cbr /\u003e\n\n\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\nUse markers to display single locations on a map. This page shows how to add a\nmarker to a map programmatically, and by using HTML.\n\n\nAdd a marker using HTML\n\nTo add a 3D marker using HTML, add a `gmp-marker-3d` child element to the\n`gmp-map-3d` element. The following snippet shows adding markers to a web page: \n\n \u003cgmp-map-3d\n mode=\"hybrid\"\n center=\"48.861000,2.335861\"\n heading=\"110\"\n tilt=\"67.5\"\n range=\"1000\"\n style=\"height:400px\"\n \u003e\n \u003cgmp-marker-3d\n position=\"48.861000,2.335861\"\u003e\n \u003c/gmp-marker-3d\u003e\n \u003c/gmp-map-3d\u003e\n\nAdd a marker programmatically\n\nTo add a 3D marker to a map programmatically, create a new `Marker3DElement`,\npassing `lat/lng` coordinates and a reference to the basemap, as shown in this\nexample: \n\n const marker = new Marker3DElement({\n position: {lat: 47.6093, lng: -122.3402}, // (Required) Marker must have a lat/lng.\n altitudeMode : \"ABSOLUTE\", // (Optional) Treated as CLAMP_TO_GROUND if omitted.\n extruded : true, // (Optional) Draws line from ground to the bottom of the marker.\n label : \"Basic Marker\" // (Optional) Add a label to the marker.\n });\n\n map.append(marker); // The marker must be appended to the map.\n\nNext steps\n\n- [Basic marker customization](/maps/documentation/javascript/3d/marker-customization)"]]