Sử dụng điểm đánh dấu để hiển thị các vị trí riêng lẻ trên bản đồ. Trang này trình bày cách thêm một điểm đánh dấu vào bản đồ theo phương thức lập trình và bằng cách sử dụng HTML.
Thêm điểm đánh dấu bằng HTML
Để thêm một điểm đánh dấu 3D bằng HTML, hãy thêm một phần tử con gmp-marker-3d vào phần tử gmp-map-3d. Đoạn mã sau đây cho biết cách thêm điểm đánh dấu vào một trang web:
Để thêm một điểm đánh dấu 3D vào bản đồ theo cách lập trình, hãy tạo một Marker3DElement mới, truyền toạ độ lat/lng và một tham chiếu đến bản đồ cơ sở, như trong ví dụ này:
constmarker=newMarker3DElement({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.
[null,null,["Cập nhật lần gần đây nhất: 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)"]]