api/templates/main/search-api-guide.html.twig

{% extends 'base.html.twig' %}

{% block title %}راهنمای API جستجوی مکان | می‌مپس{% endblock %}

{% block description %}راهنمای کامل استفاده از API جستجوی مکان می‌مپس - نحوه جستجوی مکان‌ها، خیابان‌ها و مناطق با مثال‌های عملی{% endblock %}

{% block keywords %}API جستجو, جستجوی مکان, جستجوی خیابان, API نقشه, کد نمونه جستجو, JavaScript جستجو{% endblock %}

{% block og_title %}راهنمای API جستجوی مکان می‌مپس{% endblock %}

{% block og_description %}راهنمای کامل استفاده از API جستجوی مکان می‌مپس با مثال‌های عملی{% endblock %}

{% block body %}
    <!-- Hero Section -->
    <section class="hero-section text-white">
        <div class="container">
            <div class="text-center">
                <h1 class="display-4 fw-bold mb-4">
                    راهنمای API جستجوی مکان
                    <span class="d-block">سرویس می‌مپس</span>
                </h1>
                <p class="lead opacity-90">
                    یاد بگیرید چگونه از API جستجوی مکان می‌مپس در پروژه‌های خود استفاده کنید
                </p>
            </div>
        </div>
    </section>

    <!-- Table of Contents -->
    <section class="py-5 bg-light">
        <div class="container">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4">
                    <h2 class="h3 fw-bold mb-4">فهرست مطالب</h2>
                    <div class="row g-3">
                        <div class="col-lg-4 col-md-6">
                            <a href="#introduction" class="text-decoration-none">
                                <div class="card h-100 border-0 shadow-sm hover-card">
                                    <div class="card-body text-center p-3">
                                        <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-2" style="width: 40px; height: 40px;">
                                            <span class="fw-bold">1</span>
                                        </div>
                                        <h6 class="card-title mb-0 text-dark">معرفی API</h6>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <a href="#endpoint" class="text-decoration-none">
                                <div class="card h-100 border-0 shadow-sm hover-card">
                                    <div class="card-body text-center p-3">
                                        <div class="bg-success text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-2" style="width: 40px; height: 40px;">
                                            <span class="fw-bold">2</span>
                                        </div>
                                        <h6 class="card-title mb-0 text-dark">نقطه پایانی</h6>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <a href="#parameters" class="text-decoration-none">
                                <div class="card h-100 border-0 shadow-sm hover-card">
                                    <div class="card-body text-center p-3">
                                        <div class="bg-warning text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-2" style="width: 40px; height: 40px;">
                                            <span class="fw-bold">3</span>
                                        </div>
                                        <h6 class="card-title mb-0 text-dark">پارامترها</h6>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <a href="#examples" class="text-decoration-none">
                                <div class="card h-100 border-0 shadow-sm hover-card">
                                    <div class="card-body text-center p-3">
                                        <div class="bg-info text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-2" style="width: 40px; height: 40px;">
                                            <span class="fw-bold">4</span>
                                        </div>
                                        <h6 class="card-title mb-0 text-dark">مثال‌های عملی</h6>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <a href="#response" class="text-decoration-none">
                                <div class="card h-100 border-0 shadow-sm hover-card">
                                    <div class="card-body text-center p-3">
                                        <div class="bg-secondary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-2" style="width: 40px; height: 40px;">
                                            <span class="fw-bold">5</span>
                                        </div>
                                        <h6 class="card-title mb-0 text-dark">ساختار پاسخ</h6>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <a href="#categories" class="text-decoration-none">
                                <div class="card h-100 border-0 shadow-sm hover-card">
                                    <div class="card-body text-center p-3">
                                        <div class="bg-dark text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-2" style="width: 40px; height: 40px;">
                                            <span class="fw-bold">6</span>
                                        </div>
                                        <h6 class="card-title mb-0 text-dark">دسته‌بندی‌ها</h6>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Introduction Section -->
    <section id="introduction" class="py-5">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="text-center mb-5">
                        <h2 class="display-5 fw-bold text-gradient mb-3">معرفی API جستجوی مکان</h2>
                        <p class="lead text-muted">
                            API جستجوی مکان می‌مپس امکان جستجوی هوشمند مکان‌ها، خیابان‌ها و مناطق را فراهم می‌کند
                        </p>
                    </div>
                    
                    <div class="card border-0 shadow-sm">
                        <div class="card-body p-4">
                            <h3 class="h4 fw-bold mb-4">ویژگی‌های کلیدی</h3>
                            <div class="row g-4">
                                <div class="col-md-6">
                                    <div class="d-flex align-items-start">
                                        <div class="bg-success text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px; flex-shrink: 0;">
                                            <i class="fas fa-search"></i>
                                        </div>
                                        <div>
                                            <h5 class="fw-bold mb-2">جستجوی هوشمند</h5>
                                            <p class="text-muted mb-0">جستجوی فازی و تطبیقی مکان‌ها</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="d-flex align-items-start">
                                        <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px; flex-shrink: 0;">
                                            <i class="fas fa-map-marker-alt"></i>
                                        </div>
                                        <div>
                                            <h5 class="fw-bold mb-2">مختصات دقیق</h5>
                                            <p class="text-muted mb-0">مختصات جغرافیایی دقیق برای هر مکان</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="d-flex align-items-start">
                                        <div class="bg-warning text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px; flex-shrink: 0;">
                                            <i class="fas fa-sort-amount-down"></i>
                                        </div>
                                        <div>
                                            <h5 class="fw-bold mb-2">مرتب‌سازی بر اساس فاصله</h5>
                                            <p class="text-muted mb-0">مرتب‌سازی نتایج بر اساس نزدیکی به موقعیت کاربر</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="d-flex align-items-start">
                                        <div class="bg-info text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px; flex-shrink: 0;">
                                            <i class="fas fa-tags"></i>
                                        </div>
                                        <div>
                                            <h5 class="fw-bold mb-2">دسته‌بندی مکان‌ها</h5>
                                            <p class="text-muted mb-0">فیلتر کردن بر اساس نوع مکان</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Endpoint Section -->
    <section id="endpoint" class="py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold text-gradient mb-3">نقطه پایانی API</h2>
                <p class="lead text-muted">
                    آدرس و روش استفاده از API جستجوی مکان
                </p>
            </div>
            
            <div class="row g-4">
                <div class="col-lg-8 mx-auto">
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0">نقطه پایانی جستجو</h5>
                        </div>
                        <div class="card-body">
                            <div class="bg-dark text-light p-4 rounded text-end" dir="ltr">
                                <strong>URL:</strong><br>
                                <code class="text-info">https://memaps.ir/api/search/places</code><br><br>
                                <strong>Method:</strong><br>
                                <code class="text-success">GET</code><br><br>
                                <strong>Content-Type:</strong><br>
                                <code class="text-warning">application/json</code>
                            </div>
                            
                            <div class="mt-4">
                                <h6 class="fw-bold mb-3">مثال ساده:</h6>
                                <pre class="bg-light p-3 rounded text-end" dir="ltr"><code>GET https://memaps.ir/api/search/places?q=تهران&limit=10</code></pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Parameters Section -->
    <section id="parameters" class="py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold text-gradient mb-3">پارامترهای API</h2>
                <p class="lead text-muted">
                    پارامترهای قابل استفاده در API جستجوی مکان
                </p>
            </div>
            
            <div class="row g-4">
                <div class="col-lg-10 mx-auto">
                    <div class="card border-0 shadow-sm">
                        <div class="card-body p-4">
                            <div class="table-responsive">
                                <table class="table table-striped">
                                    <thead class="table-dark">
                                        <tr>
                                            <th>پارامتر</th>
                                            <th>نوع</th>
                                            <th>اجباری</th>
                                            <th>توضیح</th>
                                            <th>مثال</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>q</code></td>
                                            <td>string</td>
                                            <td>✅</td>
                                            <td>عبارت جستجو</td>
                                            <td><code>تهران</code></td>
                                        </tr>
                                        <tr>
                                            <td><code>lat</code></td>
                                            <td>float</td>
                                            <td>❌</td>
                                            <td>عرض جغرافیایی برای مرتب‌سازی بر اساس فاصله</td>
                                            <td><code>35.6892</code></td>
                                        </tr>
                                        <tr>
                                            <td><code>lng</code></td>
                                            <td>float</td>
                                            <td>❌</td>
                                            <td>طول جغرافیایی برای مرتب‌سازی بر اساس فاصله</td>
                                            <td><code>51.3890</code></td>
                                        </tr>
                                        <tr>
                                            <td><code>type</code></td>
                                            <td>string</td>
                                            <td>❌</td>
                                            <td>نوع مکان (points, streets, areas)</td>
                                            <td><code>points</code></td>
                                        </tr>
                                        <tr>
                                            <td><code>limit</code></td>
                                            <td>integer</td>
                                            <td>❌</td>
                                            <td>تعداد نتایج (پیش‌فرض: 20)</td>
                                            <td><code>10</code></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Examples Section -->
    <section id="examples" class="py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold text-gradient mb-3">مثال‌های عملی</h2>
                <p class="lead text-muted">
                    مثال‌های مختلف استفاده از API جستجوی مکان
                </p>
            </div>
            
            <div class="row g-4">
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-header bg-success text-white">
                            <h5 class="mb-0">جستجوی ساده</h5>
                        </div>
                        <div class="card-body">
                            <h6 class="fw-bold mb-2">درخواست:</h6>
                            <pre class="bg-dark text-light p-3 rounded text-end" dir="ltr"><code>GET https://memaps.ir/api/search/places?q=تهران&limit=5</code></pre>
                            
                            <h6 class="fw-bold mb-2 mt-3">پاسخ:</h6>
                            <pre class="bg-light p-3 rounded text-end" dir="ltr"><code>{
  "success": true,
  "count": 5,
  "results": [
    {
      "id": "123456",
      "name": "تهران",
      "type": "city",
      "lat": 35.6892,
      "lng": 51.3890,
      "city": "تهران",
      "details": "پایتخت ایران"
    }
  ]
}</code></pre>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0">جستجو با موقعیت</h5>
                        </div>
                        <div class="card-body">
                            <h6 class="fw-bold mb-2">درخواست:</h6>
                            <pre class="bg-dark text-light p-3 rounded text-end" dir="ltr"><code>GET https://memaps.ir/api/search/places?q=رستوران&lat=35.6892&lng=51.3890&limit=10</code></pre>
                            
                            <h6 class="fw-bold mb-2 mt-3">پاسخ:</h6>
                            <pre class="bg-light p-3 rounded text-end" dir="ltr"><code>{
  "success": true,
  "count": 10,
  "results": [
    {
      "id": "789012",
      "name": "رستوران شاندیز",
      "type": "restaurant",
      "lat": 35.6895,
      "lng": 51.3895,
      "city": "تهران",
      "distance": 0.5
    }
  ]
}</code></pre>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-header bg-warning text-dark">
                            <h5 class="mb-0">جستجوی خیابان‌ها</h5>
                        </div>
                        <div class="card-body">
                            <h6 class="fw-bold mb-2">درخواست:</h6>
                            <pre class="bg-dark text-light p-3 rounded text-end" dir="ltr"><code>GET https://memaps.ir/api/search/places?q=ولیعصر&type=streets&limit=5</code></pre>
                            
                            <h6 class="fw-bold mb-2 mt-3">پاسخ:</h6>
                            <pre class="bg-light p-3 rounded text-end" dir="ltr"><code>{
  "success": true,
  "count": 5,
  "results": [
    {
      "id": "345678",
      "name": "خیابان ولیعصر",
      "type": "street",
      "lat": 35.6892,
      "lng": 51.3890,
      "city": "تهران",
      "details": "طولانی‌ترین خیابان خاورمیانه"
    }
  ]
}</code></pre>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-header bg-info text-white">
                            <h5 class="mb-0">جستجوی مناطق</h5>
                        </div>
                        <div class="card-body">
                            <h6 class="fw-bold mb-2">درخواست:</h6>
                            <pre class="bg-dark text-light p-3 rounded text-end" dir="ltr"><code>GET https://memaps.ir/api/search/places?q=شمال تهران&type=areas&limit=5</code></pre>
                            
                            <h6 class="fw-bold mb-2 mt-3">پاسخ:</h6>
                            <pre class="bg-light p-3 rounded text-end" dir="ltr"><code>{
  "success": true,
  "count": 5,
  "results": [
    {
      "id": "901234",
      "name": "شمال تهران",
      "type": "area",
      "lat": 35.7892,
      "lng": 51.3890,
      "city": "تهران",
      "details": "منطقه شمالی تهران"
    }
  ]
}</code></pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Response Structure Section -->
    <section id="response" class="py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold text-gradient mb-3">ساختار پاسخ</h2>
                <p class="lead text-muted">
                    توضیح کامل ساختار پاسخ API
                </p>
            </div>
            
            <div class="row g-4">
                <div class="col-lg-8 mx-auto">
                    <div class="card border-0 shadow-sm">
                        <div class="card-body p-4">
                            <h3 class="h4 fw-bold mb-4">ساختار کلی پاسخ</h3>
                            <pre class="bg-dark text-light p-4 rounded text-end" dir="ltr"><code>{
  "success": boolean,      // وضعیت موفقیت درخواست
  "count": number,         // تعداد نتایج
  "results": [             // آرایه نتایج
    {
      "id": string,        // شناسه یکتا
      "name": string,      // نام مکان
      "type": string,      // نوع مکان
      "lat": number,       // عرض جغرافیایی
      "lng": number,       // طول جغرافیایی
      "city": string,      // نام شهر (اختیاری)
      "details": string,   // جزئیات اضافی (اختیاری)
      "distance": number   // فاصله از موقعیت کاربر (اختیاری)
    }
  ]
}</code></pre>
                            
                            <h4 class="h5 fw-bold mb-3 mt-4">کدهای خطا</h4>
                            <div class="table-responsive">
                                <table class="table table-striped">
                                    <thead class="table-dark">
                                        <tr>
                                            <th>کد خطا</th>
                                            <th>توضیح</th>
                                            <th>راه حل</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>400</code></td>
                                            <td>پارامترهای نامعتبر</td>
                                            <td>پارامتر q را بررسی کنید</td>
                                        </tr>
                                        <tr>
                                            <td><code>404</code></td>
                                            <td>نتیجه‌ای یافت نشد</td>
                                            <td>عبارت جستجو را تغییر دهید</td>
                                        </tr>
                                        <tr>
                                            <td><code>500</code></td>
                                            <td>خطای سرور</td>
                                            <td>دوباره تلاش کنید</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Categories Section -->
    <section id="categories" class="py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold text-gradient mb-3">دسته‌بندی‌های مکان</h2>
                <p class="lead text-muted">
                    انواع مختلف مکان‌هایی که می‌توانید جستجو کنید
                </p>
            </div>
            
            <div class="row g-4">
                <div class="col-lg-4">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-header bg-success text-white">
                            <h5 class="mb-0">📍 نقاط (Points)</h5>
                        </div>
                        <div class="card-body">
                            <p class="card-text">مکان‌های نقطه‌ای مانند:</p>
                            <ul class="list-unstyled">
                                <li>✅ رستوران‌ها</li>
                                <li>✅ هتل‌ها</li>
                                <li>✅ بانک‌ها</li>
                                <li>✅ داروخانه‌ها</li>
                                <li>✅ پمپ بنزین</li>
                                <li>✅ مراکز خرید</li>
                                <li>✅ دانشگاه‌ها</li>
                                <li>✅ بیمارستان‌ها</li>
                            </ul>
                            <div class="mt-3">
                                <code class="bg-light p-2 rounded">type=points</code>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-4">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0">🛣️ خیابان‌ها (Streets)</h5>
                        </div>
                        <div class="card-body">
                            <p class="card-text">مسیرهای ارتباطی مانند:</p>
                            <ul class="list-unstyled">
                                <li>✅ خیابان‌ها</li>
                                <li>✅ بزرگراه‌ها</li>
                                <li>✅ جاده‌ها</li>
                                <li>✅ کوچه‌ها</li>
                                <li>✅ پل‌ها</li>
                                <li>✅ تونل‌ها</li>
                                <li>✅ میدان‌ها</li>
                                <li>✅ تقاطع‌ها</li>
                            </ul>
                            <div class="mt-3">
                                <code class="bg-light p-2 rounded">type=streets</code>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-4">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-header bg-warning text-dark">
                            <h5 class="mb-0">🏘️ مناطق (Areas)</h5>
                        </div>
                        <div class="card-body">
                            <p class="card-text">مناطق و نواحی مانند:</p>
                            <ul class="list-unstyled">
                                <li>✅ محله‌ها</li>
                                <li>✅ شهرها</li>
                                <li>✅ روستاها</li>
                                <li>✅ پارک‌ها</li>
                                <li>✅ دانشگاه‌ها</li>
                                <li>✅ فرودگاه‌ها</li>
                                <li>✅ مراکز تجاری</li>
                                <li>✅ مناطق صنعتی</li>
                            </ul>
                            <div class="mt-3">
                                <code class="bg-light p-2 rounded">type=areas</code>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- JavaScript Examples Section -->
    <section class="py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold text-gradient mb-3">مثال‌های JavaScript</h2>
                <p class="lead text-muted">
                    نحوه استفاده از API در JavaScript
                </p>
            </div>
            
            <div class="row g-4">
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-header bg-success text-white">
                            <h5 class="mb-0">جستجوی ساده</h5>
                        </div>
                        <div class="card-body">
                            <pre class="bg-dark text-light p-3 rounded text-end" dir="ltr"><code>// جستجوی ساده
async function searchPlaces(query) {
    try {
        const response = await fetch(
            `https://memaps.ir/api/search/places?q=${encodeURIComponent(query)}`
        );
        const data = await response.json();
        
        if (data.success) {
            console.log('نتایج:', data.results);
            return data.results;
        } else {
            console.error('خطا در جستجو');
        }
    } catch (error) {
        console.error('خطای شبکه:', error);
    }
}

// استفاده
searchPlaces('تهران');</code></pre>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0">جستجو با موقعیت</h5>
                        </div>
                        <div class="card-body">
                            <pre class="bg-dark text-light p-3 rounded text-end" dir="ltr"><code>// جستجو با موقعیت کاربر
async function searchNearby(query, lat, lng) {
    try {
        const response = await fetch(
            `https://memaps.ir/api/search/places?q=${encodeURIComponent(query)}&lat=${lat}&lng=${lng}&limit=10`
        );
        const data = await response.json();
        
        if (data.success) {
            // مرتب‌سازی بر اساس فاصله
            const sortedResults = data.results.sort((a, b) => 
                (a.distance || 0) - (b.distance || 0)
            );
            return sortedResults;
        }
    } catch (error) {
        console.error('خطا:', error);
    }
}

// استفاده
searchNearby('رستوران', 35.6892, 51.3890);</code></pre>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-header bg-warning text-dark">
                            <h5 class="mb-0">جستجوی فیلتر شده</h5>
                        </div>
                        <div class="card-body">
                            <pre class="bg-dark text-light p-3 rounded text-end" dir="ltr"><code>// جستجو بر اساس نوع
async function searchByType(query, type) {
    try {
        const response = await fetch(
            `https://memaps.ir/api/search/places?q=${encodeURIComponent(query)}&type=${type}&limit=20`
        );
        const data = await response.json();
        
        if (data.success) {
            return data.results;
        }
    } catch (error) {
        console.error('خطا:', error);
    }
}

// جستجوی خیابان‌ها
searchByType('ولیعصر', 'streets');

// جستجوی رستوران‌ها
searchByType('رستوران', 'points');</code></pre>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-header bg-info text-white">
                            <h5 class="mb-0">نمایش روی نقشه</h5>
                        </div>
                        <div class="card-body">
                            <pre class="bg-dark text-light p-3 rounded text-end" dir="ltr"><code>// نمایش نتایج روی نقشه Leaflet
async function searchAndShowOnMap(query, map) {
    try {
        const response = await fetch(
            `https://memaps.ir/api/search/places?q=${encodeURIComponent(query)}&limit=10`
        );
        const data = await response.json();
        
        if (data.success) {
            data.results.forEach(place => {
                const marker = L.marker([place.lat, place.lng])
                    .bindPopup(`
                        &lt;strong&gt;${place.name}&lt;/strong&gt;&lt;br&gt;
                        ${place.city ? `شهر: ${place.city}&lt;br&gt;` : ''}
                        ${place.details || ''}
                    `)
                    .addTo(map);
            });
        }
    } catch (error) {
        console.error('خطا:', error);
    }
}

// استفاده
searchAndShowOnMap('تهران', map);</code></pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CORS Section -->
    <section class="py-5 bg-light">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-success text-white">
                            <h5 class="mb-0">پشتیبانی از CORS</h5>
                        </div>
                        <div class="card-body">
                            <p class="card-text">
                                API جستجوی مکان می‌مپس از CORS پشتیبانی می‌کند و می‌توانید مستقیماً از مرورگر استفاده کنید:
                            </p>
                            <pre class="bg-dark text-light p-3 rounded text-end" dir="ltr"><code>// درخواست از مرورگر
fetch('https://memaps.ir/api/search/places?q=تهران')
    .then(response => response.json())
    .then(data => {
        console.log('نتایج:', data.results);
    })
    .catch(error => {
        console.error('خطا:', error);
    });</code></pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block stylesheets %}
<style>
    .hover-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .hover-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
    }
    
    pre {
        font-size: 0.9rem;
        line-height: 1.4;
    }
    
    code {
        font-family: 'Courier New', monospace;
    }
</style>
{% endblock %}