3D-Karte eine Markierung hinzufügen
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Plattform auswählen:
Android
iOS
JavaScript
Mithilfe von Markierungen lassen sich einzelne Standorte auf einer Karte kennzeichnen. Auf dieser Seite werden zwei Methoden zum Einfügen einer Markierung beschrieben – programmatisch und mithilfe von HTML.
Markierung mithilfe von HTML einfügen
Um mithilfe von HTML eine 3D-Markierung einzufügen, fügen Sie dem gmp-map-3d
-Element ein untergeordnetes gmp-marker-3d
-Element hinzu. Im folgenden Snippet sehen Sie, wie Markierungen auf einer Webseite eingefügt werden:
<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>
Markierung programmatisch einfügen
Wenn Sie einer Karte programmatisch eine 3D-Markierung hinzufügen möchten, erstellen Sie ein neues Marker3DElement
, mit dem lat/lng
-Koordinaten und ein Verweis auf die Basiskarte übergeben werden, wie in diesem Beispiel gezeigt:
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.
Nächste Schritte
Sofern nicht anders angegeben, sind die Inhalte dieser Seite unter der Creative Commons Attribution 4.0 License und Codebeispiele unter der Apache 2.0 License lizenziert. Weitere Informationen finden Sie in den Websiterichtlinien von Google Developers. Java ist eine eingetragene Marke von Oracle und/oder seinen Partnern.
Zuletzt aktualisiert: 2025-07-22 (UTC).
[null,null,["Zuletzt aktualisiert: 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)"]]