# نمایش نقشهٔ برداری
برای نمایش نقشهٔ تعاملی در سایت، از تایل‌ها و استایل آمادهٔ بلد استفاده می‌کنید. نقشه از کنار هم قرار گرفتن بخش‌های کوچکی به نام **تایل** ساخته می‌شود. فایل **استایل** مشخص می‌کند راه‌ها، رنگ‌ها، نوشته‌ها و دیگر بخش‌های نقشه چگونه نمایش داده شوند.
تایل‌ها دو نوع برداری و تصویری دارند. در تایل برداری، اجزای نقشه جدا از هم نگهداری می‌شوند؛ بنابراین می‌توانید رنگ، نوشته و لایه‌ها را تغییر دهید و نقشه در اندازه‌های مختلف واضح بماند. برای نمایش نقشه در سایت، تایل برداری را پیشنهاد می‌کنیم. [تفاوت و نمونهٔ نقشهٔ تصویری](/dashboard/docs/tile-raster)
## با این نقشه چه کارهایی می‌توان کرد؟
- نقشه‌ای نمایش دهید که کاربر بتواند آن را جابه‌جا و بزرگ‌نمایی کند.
- مکان‌ها و اطلاعات کسب‌وکار خود را به نقشه اضافه کنید.
## نقشه را به صفحه اضافه کنید
برای این نمونه از **MapLibre GL JS**، کتابخانه‌ای برای نمایش نقشه در مرورگر، استفاده می‌کنیم. ابتدا یک [کلید عمومی](/dashboard/docs/authentication#کلید-عمومی-برای-مرورگر) با دسترسی نقشهٔ برداری بسازید و نشانی سایت خود را در مبدأهای مجاز آن ثبت کنید. کلید خصوصی را در کد مرورگر قرار ندهید.
قطعهٔ زیر را در صفحهٔ HTML خود قرار دهید و `YOUR_PUBLIC_API_KEY` را با کلید عمومی جایگزین کنید. اگر صفحهٔ آماده ندارید، تب «HTML کامل» را انتخاب کنید و کد آن را در یک فایل با پسوند `.html` بگذارید. برای اجرای محلی و تنظیم مبدأ مجاز، [راهنمای اولین نقشه](/dashboard/docs/quick-start-map) را ببینید.
### قطعه کد
```html
```
### HTML کامل
```html
نقشه برداری بلد
```
پس از بارگذاری صفحه، نقشه‌ای با نوشته‌های فارسی می‌بینید که می‌توانید آن را جابه‌جا و بزرگ‌نمایی کنید.
## مرکز و بزرگ‌نمایی را تغییر دهید
در کد بالا، `center` نقطه‌ای است که نقشه ابتدا در اطراف آن باز می‌شود. مختصات را به ترتیب **طول جغرافیایی، عرض جغرافیایی** بنویسید. برای مثال، `[51.389, 35.6892]` نقطه‌ای در تهران است.
مقدار `zoom` میزان نزدیکی نما را تعیین می‌کند: عدد بزرگ‌تر نمای نزدیک‌تری نشان می‌دهد. برای دیدن خیابان‌های اطراف مرکز، مقدار آن را از `12` به `15` تغییر دهید.
```javascript
center: [51.389, 35.6892],
zoom: 15,
```
## یک نشانگر اضافه کنید
این کد را پس از ساخت `map`، داخل همان تگ `script` قرار دهید. مختصات را با مکان موردنظر خود جایگزین کنید:
```javascript
new maplibregl.Marker()
.setLngLat([51.389, 35.6892])
.addTo(map);
```
یک نشانگر در محل انتخاب‌شده روی نقشه ظاهر می‌شود.
## اطلاعات یک مکان را نمایش دهید
برای نمایش نام یا آدرس با انتخاب نشانگر، به آن یک پنجرهٔ اطلاعات وصل کنید. این کد را به جای نمونهٔ نشانگر قبلی قرار دهید:
```javascript
const popup = new maplibregl.Popup().setText("فروشگاه ما، خیابان انقلاب");
new maplibregl.Marker()
.setLngLat([51.389, 35.6892])
.setPopup(popup)
.addTo(map);
```
متن پنجره را با نام یا آدرس مکان خود عوض کنید. با انتخاب نشانگر، متن نمایش داده می‌شود.
[](/dashboard/docs/assets/vector-marker-popup.webp)
این تصویر خروجی واقعی نمونه است. نام مکان و محدودهٔ نقشه را می‌توانید در کد خود تغییر دهید.
## نمایش منبع نقشه
طبق قوانین بلد، نام و کپی‌رایت بلد و OpenStreetMap باید روی نقشه قابل مشاهده بماند. حذف آن ممکن است به بسته‌شدن حساب شما منجر شود. نمونه‌های این صفحه اطلاعات منبع را روی نقشه نمایش می‌دهند؛ آن‌ها را حذف یا پنهان نکنید.
## اگر نقشه نمایش داده نشد
- مطمئن شوید `YOUR_PUBLIC_API_KEY` را با کلید عمومی خود جایگزین کرده‌اید.
- دسترسی نقشهٔ برداری و مبدأ مجاز را در تنظیمات کلید بررسی کنید. اگر از `localhost` استفاده می‌کنید، پورت آن هم باید در مبدأ ثبت شود.
- صفحه را از طریق یک سرور وب باز کنید و مطمئن شوید بخش `map` ارتفاع دارد. اگر افزونهٔ نمایش فارسی بارگذاری نشود، نوشته‌های فارسی ممکن است درست دیده نشوند.
[نمایش نقشه در وردپرس](/dashboard/docs/guides/wordpress-map-widget) · [نمایش شعب روی نقشه](/dashboard/docs/guides/branches-page) · [انتخاب آدرس روی نقشه](/dashboard/docs/guides/checkout-address-picker)