التراكبات هي عناصر على الخريطة مرتبطة بإحداثيات خطوط الطول أو دوائر العرض، لذا تتحرك عند سحب الخريطة أو تكبيرها أو تصغيرها. إذا أردت وضع صورة على خريطة، يمكنك استخدام عنصر GroundOverlay.
للحصول على معلومات عن الأنواع الأخرى من العناصر التي تظهر على سطح الخريطة، يُرجى الاطّلاع على مقالة الرسم على الخريطة.
إضافة تراكب أرض
يحدّد مُنشئ GroundOverlay عنوان URL لصورة وLatLngBounds للصورة كمَعلمات. سيتم عرض الصورة على الخريطة، وسيتم تقييدها بالحدود المحدّدة، وسيتم تعديل حجمها باستخدام إسقاط الخريطة.
TypeScript
// This example uses a GroundOverlay to place an image on the map// showing an antique map of Newark, NJ.lethistoricalOverlay;functioninitMap():void{constmap=newgoogle.maps.Map(document.getElementById("map")asHTMLElement,{zoom:13,center:{lat:40.74,lng:-74.18},});constimageBounds={north:40.773941,south:40.712216,east:-74.12544,west:-74.22655,};historicalOverlay=newgoogle.maps.GroundOverlay("https://storage.googleapis.com/geo-devrel-public-buckets/newark_nj_1922-661x516.jpeg",imageBounds);historicalOverlay.setMap(map);}declareglobal{interfaceWindow{initMap:()=>void;}}window.initMap=initMap;
// This example uses a GroundOverlay to place an image on the map// showing an antique map of Newark, NJ.lethistoricalOverlay;functioninitMap(){constmap=newgoogle.maps.Map(document.getElementById("map"),{zoom:13,center:{lat:40.74,lng:-74.18},});constimageBounds={north:40.773941,south:40.712216,east:-74.12544,west:-74.22655,};historicalOverlay=newgoogle.maps.GroundOverlay("https://storage.googleapis.com/geo-devrel-public-buckets/newark_nj_1922-661x516.jpeg",imageBounds,);historicalOverlay.setMap(map);}window.initMap=initMap;
لإزالة تراكب من خريطة، استخدِم setMap() مع تمرير null. يُرجى العِلم أنّه لا يؤدي استدعاء هذه الطريقة إلى حذف التراكب. يؤدي ذلك إلى إزالة التراكب من الخريطة. إذا أردت بدلاً من ذلك حذف التراكب، عليك إزالته من الخريطة، ثم ضبط التراكب نفسه على null.
تاريخ التعديل الأخير: 2025-08-06 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2025-08-06 (حسب التوقيت العالمي المتفَّق عليه)"],[[["\u003cp\u003eGround overlays let you place images on a map tied to latitude/longitude coordinates.\u003c/p\u003e\n"],["\u003cp\u003eYou can add a ground overlay using the \u003ccode\u003eGroundOverlay\u003c/code\u003e object, specifying the image URL and boundaries.\u003c/p\u003e\n"],["\u003cp\u003eTo remove a ground overlay from the map, call \u003ccode\u003esetMap(null)\u003c/code\u003e on the overlay object.\u003c/p\u003e\n"],["\u003cp\u003eRemoving an overlay from the map doesn't delete it; to delete it, set the overlay object to \u003ccode\u003enull\u003c/code\u003e after removing it from the map.\u003c/p\u003e\n"]]],["Ground overlays, images tied to latitude/longitude coordinates, are added to a map using the `GroundOverlay` constructor, specifying an image URL and `LatLngBounds`. The `setMap()` method then renders the image. Removing an overlay involves calling `setMap(null)` on the overlay object, which detaches it from the map but doesn't delete it. To delete the overlay it needs to be set to null. Example code is provided in TypeScript and JavaScript.\n"],null,["Select platform: [Android](/maps/documentation/android-sdk/groundoverlay \"View this page for the Android platform docs.\") [iOS](/maps/documentation/ios-sdk/overlays \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/groundoverlays \"View this page for the JavaScript platform docs.\")\n\n1. [Introduction](#introduction)\n2. [Add a ground overlay](#add)\n3. [Remove a ground overlay](#remove)\n\nIntroduction\n\nOverlays are objects on the map that are tied to\nlatitude/longitude coordinates, so they move when you drag or\nzoom the map. If you want to place an image on a map, you can use a\n`GroundOverlay` object.\n\nFor information on other types of overlay, see\n[Drawing on the map](/maps/documentation/javascript/overlays).\n\nAdd a ground overlay\n\nThe constructor for a\n[`GroundOverlay`](/maps/documentation/javascript/reference#GroundOverlay) specifies a URL of an image\nand the `LatLngBounds` of the image as parameters. The image will\nbe rendered on the map, constrained to the given bounds, and conformed\nusing the map's projection. \n\nTypeScript \n\n```typescript\n// This example uses a GroundOverlay to place an image on the map\n// showing an antique map of Newark, NJ.\n\nlet historicalOverlay;\n\nfunction initMap(): void {\n const map = new google.maps.Map(\n document.getElementById(\"map\") as HTMLElement,\n {\n zoom: 13,\n center: { lat: 40.74, lng: -74.18 },\n }\n );\n\n const imageBounds = {\n north: 40.773941,\n south: 40.712216,\n east: -74.12544,\n west: -74.22655,\n };\n\n historicalOverlay = new google.maps.GroundOverlay(\n \"https://storage.googleapis.com/geo-devrel-public-buckets/newark_nj_1922-661x516.jpeg\",\n imageBounds\n );\n historicalOverlay.setMap(map);\n}\n\ndeclare global {\n interface Window {\n initMap: () =\u003e void;\n }\n}\nwindow.initMap = initMap;https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/samples/groundoverlay-simple/index.ts#L8-L41\n```\n| **Note:** Read the [guide](/maps/documentation/javascript/using-typescript) on using TypeScript and Google Maps.\n\nJavaScript \n\n```javascript\n// This example uses a GroundOverlay to place an image on the map\n// showing an antique map of Newark, NJ.\nlet historicalOverlay;\n\nfunction initMap() {\n const map = new google.maps.Map(document.getElementById(\"map\"), {\n zoom: 13,\n center: { lat: 40.74, lng: -74.18 },\n });\n const imageBounds = {\n north: 40.773941,\n south: 40.712216,\n east: -74.12544,\n west: -74.22655,\n };\n\n historicalOverlay = new google.maps.GroundOverlay(\n \"https://storage.googleapis.com/geo-devrel-public-buckets/newark_nj_1922-661x516.jpeg\",\n imageBounds,\n );\n historicalOverlay.setMap(map);\n}\n\nwindow.initMap = initMap;https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/groundoverlay-simple/docs/index.js#L7-L30\n```\n| **Note:** The JavaScript is compiled from the TypeScript snippet.\n[View example](/maps/documentation/javascript/examples/groundoverlay-simple)\n\nTry Sample \n[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps/js-samples/tree/master/dist/samples/groundoverlay-simple/jsfiddle) [Google Cloud Shell](https://ssh.cloud.google.com/cloudshell/editor?cloudshell_git_repo=https%3A%2F%2Fgithub.com%2Fgooglemaps%2Fjs-samples&cloudshell_git_branch=sample-groundoverlay-simple&cloudshell_tutorial=cloud_shell_instructions.md&cloudshell_workspace=.)\n\nRemove a ground overlay\n\nTo remove an overlay from a map, call the overlay's\n`setMap()` method, passing `null`. Note that\ncalling this method does not delete the overlay. It removes\nthe overlay from the map. If instead you wish to delete the overlay,\nyou should remove it from the map, and then set the\noverlay itself to `null`. \n\n```javascript\nfunction removeOverlay() {\n historicalOverlay.setMap(null);\n}\n```\n\n[View example](/maps/documentation/javascript/examples/overlay-remove)"]]
