با مجموعهها، منظم بمانید
ذخیره و طبقهبندی محتوا براساس اولویتهای شما.
ویژگی‌های مبتنی بر WebGL برای Maps JavaScript API به شما امکان می‌دهد شیب و چرخش را کنترل کنید، اشیاء سه بعدی را مستقیماً به نقشه اضافه کنید و موارد دیگر. ویژگی های زیر گنجانده شده است:
WebGL Overlay View به شما امکان می دهد گرافیک های 2 بعدی و 3 بعدی و محتوای متحرک سفارشی را به نقشه های خود اضافه کنید.
اکنون می توان شیب و عنوان را به صورت برنامه ریزی شده و با استفاده از حرکات ماوس و صفحه کلید تنظیم کرد.
map.moveCamera() به شما امکان می دهد چندین ویژگی دوربین را به طور همزمان تغییر دهید.
گزینه renderingType هرگونه تنظیمات نوع رندر انجام شده با پیکربندی شناسه نقشه را لغو می کند.
برای فعال کردن شیب و چرخش، گزینه tiltInteractionEnabled map را روی true تنظیم کنید یا map.setTiltInteractionEnabled را فراخوانی کنید.
برای فعال کردن پاننگ، گزینه headingInteractionEnabled map را روی true تنظیم کنید یا map.setHeadingInteractionEnabled را فراخوانی کنید.
از شناسه نقشه برای تنظیم نوع رندر استفاده کنید
همچنین می توانید نوع رندر را با استفاده از شناسه نقشه مشخص کنید. برای ایجاد شناسه نقشه جدید، مراحل استفاده از استایل نقشه مبتنی بر ابر را دنبال کنید - شناسه نقشه دریافت کنید . حتماً نوع Map را روی جاوا اسکریپت تنظیم کرده و گزینه Vector را انتخاب کنید. برای فعال کردن شیب و چرخش روی نقشه، گزینه Tilt یا Rotation را علامت بزنید. انجام این کار به شما امکان می‌دهد این مقادیر را به صورت برنامه‌ریزی تنظیم کنید، و همچنین به کاربران امکان می‌دهد شیب و سمت را مستقیماً روی نقشه تنظیم کنند. اگر استفاده از شیب یا عنوان بر برنامه شما تأثیر منفی می گذارد، شیب و چرخش را علامت نزنید تا کاربران نتوانند شیب و چرخش را تنظیم کنند.
در مرحله بعد، کد اولیه نقشه خود را با شناسه نقشه که ایجاد کرده اید به روز کنید. می توانید شناسه های نقشه خود را در صفحه مدیریت نقشه ها پیدا کنید. زمانی که نقشه را با استفاده از ویژگی mapId نمونه برداری می کنید، همانطور که در اینجا نشان داده شده است، یک شناسه نقشه ارائه دهید:
هنگام استفاده از عنصر <gmp-map> ، نقشه برداری، شیب و عنوان به طور پیش فرض فعال می شوند، که به شما امکان می دهد با استفاده از HTML یک نقشه به صفحه خود اضافه کنید. بیشتر بدانید .
نمونه ها
نمونه هایی برای نشان دادن این ویژگی ها ارائه شده است:
تاریخ آخرین بهروزرسانی 2025-08-29 بهوقت ساعت هماهنگ جهانی.
[null,null,["تاریخ آخرین بهروزرسانی 2025-08-29 بهوقت ساعت هماهنگ جهانی."],[[["\u003cp\u003eWebGL-powered features for Maps JavaScript API enable control over tilt and rotation, addition of 3D objects, and custom 2D/3D graphics with WebGL Overlay View.\u003c/p\u003e\n"],["\u003cp\u003eTo utilize WebGL features, use a vector map by specifying \u003ccode\u003erenderingType: RenderingType.VECTOR\u003c/code\u003e during map initialization or by using a map ID with the vector option enabled.\u003c/p\u003e\n"],["\u003cp\u003eTilt and rotation can be controlled programmatically or through user interaction by enabling \u003ccode\u003etiltInteractionEnabled\u003c/code\u003e and \u003ccode\u003eheadingInteractionEnabled\u003c/code\u003e map options.\u003c/p\u003e\n"],["\u003cp\u003eThe \u003ccode\u003e<gmp-map>\u003c/code\u003e element automatically enables vector maps, tilt, and heading by default, simplifying integration.\u003c/p\u003e\n"],["\u003cp\u003eSeveral examples and demos are available to explore the capabilities and implementation of WebGL features in Maps JavaScript API.\u003c/p\u003e\n"]]],[],null,["\u003cbr /\u003e\n\nWebGL-powered features for Maps JavaScript API let you\ncontrol tilt and rotation, add 3D objects directly to the map, and more. The\nfollowing features are included:\n\n- [WebGL Overlay View](/maps/documentation/javascript/webgl/webgl-overlay-view) lets you add custom 2D and 3D graphics and animated content to your maps.\n- [Tilt and heading](/maps/documentation/javascript/vector-map#tilt-rotation) can now be adjusted programmatically, and by using mouse and keyboard gestures.\n- [map.moveCamera()](/maps/documentation/javascript/vector-map#control-camera) lets you simultaneously change multiple camera properties.\n- Zoom now supports [fractional values](/maps/documentation/javascript/vector-map#fractional-zoom).\n\nGet started\n\nIn order to use the new WebGL features, you must use a vector map. This section\nshows you how.\n\nSpecify the `renderingType` option\n\nUse the `renderingType` option to specify either the raster or vector\nrendering type for your map (no map ID required):\n\n1. Load the `RenderingType` library; this can be done when loading the Maps\n library:\n\n const { Map, RenderingType } = await google.maps.importLibrary(\"maps\") as google.maps.MapsLibrary;\n\n2. When initializing the map, use the `renderingType` option to specify either\n `RenderingType.VECTOR` or `RenderingType.RASTER`:\n\n map = new Map(\n document.getElementById('map') as HTMLElement,\n {\n zoom: 4,\n center: position,\n renderingType: RenderingType.VECTOR,\n }\n );\n\nThe `renderingType` option overrides any rendering type settings made by\nconfiguring a map ID.\n\n- To enable tilt and rotation, set the `tiltInteractionEnabled` map option to true or call `map.setTiltInteractionEnabled`.\n- To enable panning, set the `headingInteractionEnabled` map option to `true` or call `map.setHeadingInteractionEnabled`.\n\nUse a map ID to set rendering type\n\nYou can also specify the rendering type by using a map ID. To create a new map\nID, follow the steps in [Using Cloud-based Map Styling - Get a map ID](/maps/documentation/javascript/styling#creating-map-ids).\nBe sure to set the Map type to **JavaScript** , and select the **Vector**\noption. Check **Tilt** or **Rotation** to enable tilt and rotation on the\nmap. Doing so lets you programmatically adjust these values, and also\nlets users adjust tilt and heading directly on the map. If the use of tilt or\nheading will adversely affect your app, leave **Tilt** and **Rotation** un-\nchecked so users cannot adjust tilt and rotation.\n\nNext, update your map initialization code with the map ID you created. You can\nfind your map IDs on the\n[Maps\nManagement](https://console.cloud.google.com/google/maps-apis/studio/maps) page. Provide a map ID when you instantiate the map using the\n`mapId` property as shown here: \n\n```javascript\nmap = new google.maps.Map(document.getElementById('map'), {\n center: {lat: -34.397, lng: 150.644},\n zoom: 8,\n mapId: '\u003cvar translate=\"no\"\u003eMAP_ID\u003c/var\u003e'\n});\n```\n| **Important:** It is recommended to associate your map ID and API key with the same Google Cloud console project.\n\nUse the `\u003cgmp-map\u003e` element\n\nVector maps, tilt, and heading are enabled by default when using he `\u003cgmp-map\u003e`\nelement, which lets you add a map to your page using HTML. [Learn more](/maps/documentation/javascript/add-google-map-wc-tut).\n\nExamples\n\nExamples have been provided to demonstrate these features:\n\n- [WebGL Overlay View](/maps/documentation/javascript/examples/webgl/webgl-overlay-simple)\n- [WebGL Tilt and Rotation](/maps/documentation/javascript/examples/webgl/webgl-tilt-rotation)\n- [WebGL Feature Tour](https://goo.gle/maps-platform-webgl-tour)\n- [WebGL Travel App Demo](https://goo.gle/maps-platform-webgl-travel-demo)"]]
