# نمایش اولین نقشه
در این راهنما یک نقشهٔ تعاملی به صفحهٔ وب اضافه می‌کنید؛ کاربر می‌تواند نقشه را جابه‌جا و بزرگنمایی کند. برای آشنایی با تایل و استایل، [نمایش نقشهٔ برداری](/dashboard/docs/tile-vector) را ببینید.
## پیش‌نیازها
- حساب و سازمان فعال در [داشبورد بلد](/dashboard/organizations).
- یک مرورگر و Python 3 برای اجرای نمونه روی رایانهٔ خود.
- یک کلید عمومی با دسترسی نقشهٔ برداری؛ در مرحلهٔ بعد آن را می‌سازید.
## کلید عمومی بسازید
1. در داشبورد، سازمان خود را انتخاب یا ایجاد کنید.
2. یک کلید **عمومی** با دسترسی نقشهٔ برداری بسازید.
3. برای اجرای محلی، مبدأ مجاز `http://localhost:8000` را به کلید اضافه کنید. نام میزبان و پورت باید با نشانی صفحه یکسان باشند.
کلید عمومی در مرورگر دیده می‌شود؛ دسترسی آن را به سرویس و مبدأهای موردنیاز محدود کنید. **کلید خصوصی را در کد مرورگر قرار ندهید.**
## کد نقشه را قرار دهید
اگر صفحهٔ HTML دارید، قطعهٔ زیر را در آن قرار دهید. در غیر این صورت، تب «HTML کامل» را انتخاب کنید و کد را در فایلی به نام `index.html` بگذارید. در هر دو حالت، `YOUR_PUBLIC_API_KEY` را با کلید عمومی خود جایگزین کنید.
### قطعه کد
```html
```
### HTML کامل
```html
نقشه برداری بلد
```
## صفحه را اجرا کنید
در پوشه‌ای که فایل `index.html` قرار دارد، دستور زیر را اجرا کنید:
```bash
python3 -m http.server 8000
```
نشانی [http://localhost:8000](http://localhost:8000) را در مرورگر باز کنید. نقشه با نوشته‌های فارسی نمایش داده می‌شود و می‌توانید آن را جابه‌جا و بزرگنمایی کنید.
تصویر، ظاهر نمونه‌ای از نقشه را نشان می‌دهد؛ محدودهٔ آن ممکن است با مرکز کد یکسان نباشد.
## نمایش منبع نقشه
طبق قوانین بلد، نام و کپی‌رایت بلد و OpenStreetMap باید روی نقشه قابل مشاهده بماند. حذف آن ممکن است به بسته‌شدن حساب شما منجر شود. نمونه‌های این صفحه اطلاعات منبع را روی نقشه نمایش می‌دهند؛ آن‌ها را حذف یا پنهان نکنید.
## اگر نقشه نمایش داده نشد
- مطمئن شوید کلید نمونه را جایگزین کرده‌اید و دسترسی نقشهٔ برداری برای آن فعال است.
- مبدأ ثبت‌شده باید دقیقاً با نشانی صفحه یکسان باشد؛ `localhost` و `127.0.0.1` دو نام میزبان متفاوت‌اند.
- صفحه را از سرور محلی باز کنید و مطمئن شوید بخش `map` ارتفاع دارد. اگر نوشته‌های فارسی درست دیده نمی‌شوند، بارگذاری افزونهٔ فارسی را در ابزار شبکهٔ مرورگر بررسی کنید.
## قدم بعدی
[مرکز و بزرگنمایی را تغییر دهید و نشانگر اضافه کنید](/dashboard/docs/tile-vector#مرکز-و-بزرگنمایی-را-تغییر-دهید) · [نمایش نقشهٔ تصویری](/dashboard/docs/tile-raster)