افزودن گوگل مپ به وردپرس برای نمایش محل مراجعه، شعبه یا رویداد کاربرد دارد. دو مسیر رایج وجود دارد: قراردادن کد Embed تولیدشده در Google Maps، یا استفاده از بلوک نقشهٔ افزونه‌ای مانند Otter. برای یک نشانی ساده، لازم نیست حتماً پروژهٔ API بسازید.
روش سادهٔ افزودن گوگل مپ به وردپرس
- در نسخهٔ دسکتاپ Google Maps، مکان درست را پیدا کنید و نقطهٔ نشانگر را بررسی کنید.
- گزینهٔ Share یا Share or embed map را باز کنید.
- در بخش Embed a map، کد را با Copy HTML بگیرید.
- در برگهٔ وردپرس، بلوک Custom HTML یا ابزار HTML صفحه‌ساز را اضافه و کد را وارد کنید.
- پیش‌نمایش را ببینید و سپس برگه را ذخیره کنید.
راهنمای اشتراک‌گذاری نقشهٔ گوگل این مسیر را توضیح می‌دهد. این روش را با ساخت دستی URL برای Maps Embed API اشتباه نگیرید؛ از کد تولیدشدهٔ خود سرویس استفاده کنید. بعضی نقش‌های وردپرس مجوز نگهداری iframe ندارند؛ حذف‌شدن کد پس از ذخیره می‌تواند به مجوز یا سیاست ویرایشگر مربوط باشد.
چه زمانی Otter Blocks مناسب است؟
اگر نقشه با نشانگرها و کنترل‌های قابل‌تنظیم در ویرایشگر بلوکی می‌خواهید، بلوک Google Maps در Otter قابل‌بررسی است. Otter مجموعهٔ بلوک‌هاست و صرفاً افزونهٔ نقشه نیست. برای نصب آن، کاربرد سایر امکانات و نیاز واقعی سایت را بسنجید.
طبق راهنمای بلوک‌های نقشهٔ Otter، نوع نقشه، کنترل تمام‌صفحه و Street View و ظاهر نشانگر قابل‌تنظیم‌اند. بعضی امکانات تکمیلی به Pro وابسته‌اند؛ رایگان‌بودن افزونهٔ پایه، رایگان‌بودن سرویس Google Maps Platform را تضمین نمی‌کند.
تنظیم پروژه و کلید API
برای استفادهٔ عملیاتی از Maps JavaScript API، پروژهٔ Google Cloud و Billing فعال لازم است. راهنمای رسمی راه‌اندازی API پیش‌نیازها را توضیح می‌دهد. هزینه و سهمیه را در حساب همان پروژه بررسی کنید؛ داشتن حساب گوگل به‌تنهایی کافی نیست.
- پروژهٔ مربوط به سایت را انتخاب و سرویس‌های لازم را فعال کنید.
- طبق مرجع تنظیمات Otter، Maps JavaScript API و Places API برای بلوک گوگل لازم‌اند.
- کلید مناسب وب‌سایت بسازید و محدودیت دامنه و API را اعمال کنید.
- در وردپرس به Otter Blocks ← Settings ← Integrations بروید و کلید را در بخش Google Maps قرار دهید.
- تنظیمات را ذخیره و بلوک Google Maps را در برگه اضافه کنید.
نام بخش‌ها با نسخه ممکن است تغییر کند؛ راهنمای داخل بلوک را با نسخهٔ نصب‌شده تطبیق دهید. تنظیمات یک پروژهٔ دیگر را صرفاً از روی تصویر آموزشی کپی نکنید.
کلید مرورگر باید محدود باشد
راهنمای امنیت Google Maps محدودکردن کلید به برنامه و APIهای موردنیاز را توصیه می‌کند. برای نقشهٔ مرورگری، دامنه‌های مجاز وب‌سایت را دقیق مشخص کنید و فقط APIهای لازم را مجاز بگذارید. کلید بدون محدودیت می‌تواند به مصرف ناخواسته و هزینه منجر شود.
کلید مورد استفادهٔ JavaScript ممکن است در درخواست مرورگر قابل‌مشاهده باشد؛ پنهان‌کردن ظاهری فیلد جای محدودیت را نمی‌گیرد. کلید سمت سرور را با کلید مرورگر مشترک نکنید. پس از انتقال دامنه، محدودیت دامنهٔ مجاز باید با مقصد درست هماهنگ شود.
نشانگر، اندازه و اطلاعات جایگزین
نشانگر را روی محل واقعی مراجعه بگذارید، نه صرفاً مرکز شهر. عنوان کوتاه، آدرس متنی و سطح زوم مناسب انتخاب کنید. ساعت کاری و شمارهٔ تماس را بیرون نقشه هم بنویسید تا در صورت بارگذاری‌نشدن سرویس، کاربر اطلاعات ضروری را داشته باشد.
ارتفاع نقشه و عرض آن را برای موبایل بررسی کنید. پیمایش نقشه نباید کاربر را هنگام اسکرول صفحه گرفتار کند. کنترل تمام‌صفحه و مسیریابی را بر اساس نیاز نگه دارید و از بارگذاری چند نقشهٔ سنگین در یک صفحه بدون ضرورت پرهیز کنید.
رفع خطای نمایش
اگر نقشه خطا می‌دهد، پیام همان سرویس را بررسی کنید: Billing غیرفعال، API فعال‌نشده، کلید نامعتبر و محدودیت دامنهٔ اشتباه علت‌های متفاوت‌اند. برای رفع یک خطا، کلید را بی‌دلیل بدون محدودیت رها نکنید.
نمایش را در مرورگر مهمان و موبایل آزمایش کنید. تنظیمات رضایت و مسدودکننده‌ها ممکن است درخواست خارجی را متوقف کنند. لینک بازکردن موقعیت در نقشه و آدرس متنی، مسیر جایگزین مفیدی برای کاربر هستند.
مطالعهٔ مرتبط
بازبینی فنی: ۱۳ آبان ۱۴۰۵. تاریخ انتشار اولیه و نشانی قبلی حفظ شده‌اند.
