Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Maps JavaScript API menawarkan dua implementasi peta yang berbeda: raster dan vektor. Peta raster dimuat secara default, dan memuat peta sebagai grid ubin gambar raster berbasis piksel, yang dihasilkan oleh sisi server Google Maps Platform, lalu ditayangkan ke aplikasi web Anda. Peta vektor terdiri atas ubin berbasis vektor, yang digambar pada waktu pemuatan di sisi klien menggunakan WebGL, sebuah teknologi web yang memungkinkan browser mengakses GPU pada perangkat pengguna untuk merender grafik 2D dan 3D. Jenis peta vektor direkomendasikan untuk
pengalaman pengguna terbaik, karena memberikan keakuratan visual yang lebih baik serta
kemampuan untuk mengontrol kemiringan dan arah pada peta.
Pelajari fitur peta vektor lebih lanjut.
Tetapkan jenis rendering untuk peta dengan menentukan opsi peta renderingType, atau dengan menetapkan opsi pada ID peta terkait. Opsi renderingType
menggantikan setelan jenis rendering yang dibuat dengan mengonfigurasi ID peta.
Tentukan opsi renderingType
Gunakan opsi renderingType untuk menentukan jenis rendering raster atau vektor untuk peta Anda (tidak memerlukan ID peta). Untuk peta yang dimuat menggunakan elemen div dan JavaScript, jenis rendering default adalah google.maps.RenderingType.RASTER. Ikuti langkah-langkah berikut untuk menetapkan opsi renderingType:
Muat library RenderingType; hal ini dapat dilakukan saat memuat library Maps:
Saat jenis rendering peta vektor ditetapkan, Anda harus menetapkan opsi untuk fitur yang diperlukan.
Untuk mengaktifkan kemiringan, tetapkan opsi peta tiltInteractionEnabled ke true atau panggil
map.setTiltInteractionEnabled(true).
Untuk mengaktifkan penggeseran, tetapkan opsi peta headingInteractionEnabled ke true
atau panggil map.setHeadingInteractionEnabled(true).
Untuk peta yang dimuat menggunakan elemen <gmp-map>, jenis rendering default adalah
google.maps.RenderingType.VECTOR, dengan kontrol kemiringan dan arah diaktifkan. Untuk
menetapkan jenis rendering menggunakan elemen <gmp-map>, gunakan
atribut rendering-type.
Menggunakan ID peta untuk menetapkan jenis rendering
Anda juga dapat menentukan jenis rendering menggunakan ID peta. Untuk membuat ID peta baru, ikuti langkah-langkah di Menggunakan Gaya Visual Peta Berbasis Cloud - Dapatkan ID peta.
Pastikan untuk menetapkan Jenis peta ke JavaScript, lalu pilih salah satu opsi (Vector atau Raster). Centang Tilt dan Rotation untuk mengaktifkan kemiringan dan rotasi pada peta. Dengan melakukan hal tersebut, Anda dapat menyesuaikan nilai ini secara terprogram, dan juga memungkinkan pengguna menyesuaikan kemiringan dan arah secara langsung di peta. Jika penggunaan kemiringan atau arah akan berdampak buruk pada aplikasi Anda, biarkan Tilt dan Rotation tidak dicentang agar pengguna tidak dapat menyesuaikan kemiringan dan rotasi.
Selanjutnya, perbarui kode inisialisasi peta Anda dengan ID peta yang Anda buat. Anda dapat
menemukan ID peta di halaman
Pengelolaan
Peta. Berikan ID peta saat Anda membuat instance peta menggunakan properti mapId seperti yang ditunjukkan di sini:
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 2025-08-27 UTC."],[[["\u003cp\u003eThe Maps JavaScript API offers two map types: raster (default) and vector (recommended for enhanced user experience with tilt and heading control).\u003c/p\u003e\n"],["\u003cp\u003eYou can set the rendering type using the \u003ccode\u003erenderingType\u003c/code\u003e map option or by associating a map ID with specific rendering settings.\u003c/p\u003e\n"],["\u003cp\u003eVector maps provide better visual quality and allow for tilt and heading manipulation, requiring enabling specific interactions for these features.\u003c/p\u003e\n"],["\u003cp\u003eMap IDs offer pre-configured rendering types and can be created and managed through the Cloud console, enabling customization without code changes.\u003c/p\u003e\n"],["\u003cp\u003eUsing a map ID and API key from the same Google Cloud project is recommended for optimal integration and management.\u003c/p\u003e\n"]]],[],null,["# Rendering type (raster and vector)\n\nThe Maps JavaScript API offers two different implementations of the map: raster\nand vector. The raster map is loaded by default, and loads the map as a grid of\npixel-based raster image tiles, which are generated by Google Maps Platform\nserver-side, then served to your web app. The vector map is a composed of\nvector-based tiles, which are drawn at load time on the client-side using\nWebGL, a web technology that allows the browser to access the GPU on the user's\ndevice to render 2D and 3D graphics. The vector map type is recommended for the\nbest user experience, as it provides improved visual fidelity as well as the\nability to control tilt and heading on the map.\n[Learn more about vector map features.](/maps/documentation/javascript/vector-map)\n\nSet the rendering type for a map either by specifying the `renderingType` map\noption, or by setting the option on an associated map ID. The `renderingType`\noption overrides any rendering type settings made by configuring a map ID.\n\nSpecify the `renderingType` option\n----------------------------------\n\nUse the `renderingType` option to specify either the raster or vector\nrendering type for your map (no map ID required). For maps loaded using a `div`\nelement and JavaScript, the default rendering type is\n`google.maps.RenderingType.RASTER`. Take these steps to set the `renderingType`\noption:\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\");\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'),\n {\n zoom: 4,\n center: position,\n renderingType: RenderingType.VECTOR,\n }\n );\n\nWhen the vector map rendering type is set, you must set the options for the\nneeded features.\n\n- To enable tilt, set the `tiltInteractionEnabled` map option to `true` or call `map.setTiltInteractionEnabled(true)`.\n- To enable panning, set the `headingInteractionEnabled` map option to `true` or call `map.setHeadingInteractionEnabled(true)`.\n\nFor maps loaded using the `\u003cgmp-map\u003e` element, the default rendering type is\n`google.maps.RenderingType.VECTOR`, with tilt and heading control enabled. To\nset the rendering type by using the `\u003cgmp-map\u003e` element, use the\n`rendering-type` attribute.\n\nUse a map ID to set rendering type\n----------------------------------\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 an option (**Vector**\nor **Raster** ). Check **Tilt** and **Rotation** to enable tilt and rotation\non the map. Doing so will allow you to programmatically adjust these values, and\nalso lets users adjust tilt and heading directly on the map. If the use of tilt\nor heading will adversely affect your app, leave **Tilt** and **Rotation** un-\nchecked so users will not be able to 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."]]
