چگونه Google Maps را به وب سایت Divi خود اضافه کنیم

Google Maps یک سرویس نرم افزاری است که به کاربران امکان می دهد نقشه ها را به مخاطبان خود ارائه دهند. این سریعتر از نقشه های داخلی است و اگر آن را با Divi ادغام کرده باشید، استفاده از آن آسان تر است. Divi Builder شامل دو ماژول نقشه است که ارائه Google Maps را به یک فرآیند آسان تبدیل می کند. در این پست، نحوه اضافه کردن Google Maps به وب سایت خود را با استفاده از کلید Google Maps API و Divi Map Module خواهیم دید.

بیا شروع کنیم!

مرور

ابتدا، بیایید نگاهی به آنچه در این پست می‌سازیم بیندازیم. من می‌خواهم یک ماژول نقشه را به طرح‌بندی Divi موجود اضافه کنم و با عناصری از طرح‌بندی به آن استایل بدهم.

دسکتاپ نقشه های گوگل

تلفن Google Maps

Google Maps و API چگونه کار می کنند

در حالی که می توان به سادگی یک Google Map را در صفحه یا قالب Divi جاسازی کرد، API Google Maps به توسعه دهندگان کنترل بیشتری می دهد. نقشه هایی که از Google Maps API استفاده می کنند سریعتر بارگیری می شوند و می توانید رنگ های سفارشی را اعمال کنید، نشانگرهای سفارشی ایجاد کنید و موارد دیگر.

برای جلوگیری از دسترسی غیرمجاز، پلتفرم Google Maps از کلیدهای API استفاده می کند. دریافت و استفاده از Google Maps API آسان است. برای ایجاد یک کلید، به صفحه اعتبار پلتفرم نقشه های گوگل و یک پروژه را انتخاب یا ایجاد کنید. این پروژه برای حاوی Google Maps API شما استفاده خواهد شد، بنابراین حتماً نامی برای آن بگذارید که به راحتی قابل درک باشد.

سپس کلیک کنید اعتبارنامه ایجاد کنید در بالای صفحه و انتخاب کنید کلید ای پی ای از منو پیوند اعتبارنامه تا زمانی که پروژه ای را انتخاب نکنید ظاهر نمی شود.

سپس یک مودال با کلید API خود خواهید دید. می توانید کلید API خود را کپی کنید و مدال را ببندید. همچنین می توانید کلید را محدود کنید. این باعث می شود دیگران از آن استفاده نکنند. توصیه می کنم برای جلوگیری از استفاده غیرمجاز، کلید API را محدود کنید. کلیک ویرایش کلید API.

در زیر محدودیت های API، کلیک کنید کلید محدودیتانتخاب کنید کدام کلید را محدود کنید و آن را ذخیره کنید. یک کپی را در گوشه سمت راست بالای صفحه کلید بزنید. حالا می توانید کلید API را در Divi قرار دهید.

نحوه ادغام نقشه های گوگل در Divi

برای ادغام کلید Google Maps API خود در Divi، به وحشی > گزینه های تم در داشبورد وردپرس شما در تب General، کادری با برچسب Google API Key را مشاهده خواهید کرد. کلید را وارد کنید در فیلد قرار گرفته و تنظیمات را ذخیره کنید.

Google Maps اکنون در Divi یکپارچه شده است و می توانید یک نقشه گوگل را به صفحه یا قالب Divi خود اضافه کنید. ماژول های نقشه شما به طور خودکار به کلید دسترسی دارند، بنابراین دیگر نیازی به اضافه کردن آن نخواهید داشت. در صورت تمایل می توانید کلید هر ماژول را تغییر دهید.

چگونه یک نقشه گوگل را به صفحه یا قالب خود اضافه کنیم

شما می توانید به روش های مختلفی یک نقشه گوگل را به صفحات و قالب های Divi خود اضافه کنید. بهترین گزینه با بیشترین امکانات استفاده از ماژول های نقشه است. Divi دارای دو ماژول نقشه است که می توانید از بین آنها انتخاب کنید و روند اضافه کردن نقشه به همین صورت است. هر دو شامل پین های نقشه و ویژگی های یک ظاهر طراحی شده اند.

از آنجایی که ما API را به گزینه‌های تم Divi اضافه کردیم، ماژول‌های نقشه اکنون حاوی Google Maps API شما هستند. تنها کاری که باید انجام دهیم این است که یک آدرس و پین هایی که می خواهیم اضافه کنیم.

فرآیند ساده است. آدرسی را که می خواهید در مرکز نقشه نمایش داده شود وارد کنید و انتخاب کنید پیدا می کنم. کارت پر می شود.

بیایید یک نقشه به یک صفحه اضافه کنیم تا ببینیم چگونه کار می کند.

ماژول کارت معمولی در مقابل ماژول کارت با عرض کامل

ما می توانیم از ماژول نقشه معمولی یا ماژول نقشه کامل عرض استفاده کنیم. کار هم همینطور است. هر دو عالی به نظر می رسند و اینکه کدام یک را انتخاب می کنید فقط به طرح مورد نظر شما بستگی دارد. ماژول کارت ساده به شما امکان می دهد به پس زمینه استایل دهید و ماژول های دیگر را به راحتی به ردیف اضافه کنید.

ماژول Fullwidth Map از عرض کامل استفاده می کند. در اینجا با بخش های صحیح بالا و پایین نشان داده شده است.

چگونه Google Maps را به صفحه Divi خود اضافه کنیم

حالا بیایید ببینیم چگونه می توان یک نقشه گوگل را به یک صفحه یا قالب اضافه کرد. کار برای هر دو صفحه و قالب یکسان است. من قصد دارم با استفاده از صفحه تماس از بسته طرح بندی رایگان استودیو عکاسی که در Divi موجود است، صفحه ای ایجاد کنم.

برای مرجع، اینجا صفحه اصلی است. من یک بخش جدید برای نقشه بین دو بخش با استفاده از دستورالعمل های طراحی از بسته طرح اضافه می کنم.

یک بخش و ردیف ساده اضافه کنید

ابتدا a را اضافه کنید بخش منظم بین دو بخش اینجاست که نقشه را اضافه می کنیم.

تب تنظیمات را باز کنید، به زمینهو تغییر دهید رنگ پس زمینه به #f6f5ee. تنظیمات را ببندید.

• رنگ پس زمینه: #f6f5ee

سپس a را اضافه کنید ردیف با یک ستون به بخش

یک ماژول متن اضافه کنید

در ادامه الف را اضافه می کنیم ماژول متن برای ایجاد عنوان برای نقشه

محتوا

تغییر دادن نوع محتوا به عنوان 4 و عنوان را به قسمت محتوای اصلی اضافه کنید.

• نوع مطلب: عنوان 4
• بدنه: مکان

متن عنوان

سپس بر روی آن کلیک کنید طرح و به پایین اسکرول کنید متن عنوان. سطح 4 را انتخاب کنید و برای فونت Inter را انتخاب کنید. وزن را روی Bold و استایل را روی TT قرار دهید.

• سطح عنوان: H4
• فونت: Inter
• وزن: نیمه مشکی
• سبک: TT

رنگ فونت را به #ff5a17، اندازه را به 14px، فاصله حروف را به 1px و ارتفاع خط را به 1.4em تغییر دهید. همین برای عنوان. اکنون می توانیم این ماژول را ببندیم.

• رنگ: #ff5a17
• اندازه: 14 پیکسل
• فاصله بین حروف: 1 پیکسل
• ارتفاع خط: 1.4 em

یک ماژول نقشه اضافه کنید

اکنون زمان آن است که یک ماژول نقشه را به طرح خود اضافه کنیم. ماژول را اضافه کنید در ردیف زیر ماژول متن. در مورد من، نماد افزودن ماژول در زیر نماد ردیف ظاهر می شود. یک راه آسان برای انجام این کار وجود دارد. فقط راست کلیک کنید (برای کاربران ویندوز، Control-click برای Mac) و انتخاب کنید به لایه بروید. این یک نمای لایه را باز می کند که به راحتی قابل پیمایش و استفاده است.

بخش، سطر و ستون را باز کنید تا ماژول متن را ببینید. را کلیک کنید نماد پلاس در کنار ماژول متن برای اضافه کردن یک ماژول جدید.

این حالت استاندارد را باز می کند که در آن می توانید ماژول های خود را انتخاب کنید. اضافه کردن ماژول نقشه طبق معمول و نمای لایه ها را ببندید. ماژول نقشه همانطور که می خواستیم در زیر ماژول متن ظاهر می شود.

کلید Google Maps API را خواهید دید که قبلا وارد شده و آماده استفاده است. بعدی، آدرس را وارد کنید که می خواهید در قسمت Address مرکز نقشه نمایش داده شود. را کلیک کنید پیدا می کنم را فشار دهید تا به ماژول بگویید این آدرس را در نقشه جستجو کند. اگر نیاز به استفاده از کلید API متفاوتی از کلیدی که به عنوان کلید پیش‌فرض در گزینه‌های تم Divi وارد کرده‌اید، Change API Key را انتخاب کنید.

• آدرس مرکز نقشه: آدرس مکانی که می خواهید نمایش داده شود

ماژول مکان را جستجو می کند و آن را روی نقشه نمایش می دهد. اگر خطایی وجود دارد، به پلتفرم Google Maps برگردید تا هرگونه مشکلی در مورد کلید API خود مشاهده کنید.

مرز

سپس برو به طرح و به پایین اسکرول کنید مرز. Width را به 2px تغییر دهید و رنگ را روی سیاه قرار دهید. ماژول را ببندید و تنظیمات خود را ذخیره کنید.

• عرض: 2 پیکسل
• رنگ: #000000

نتایج

طراحی ساده ای بود، اما با چیدمان به خوبی کار می کرد.

دسکتاپ نقشه های گوگل

تلفن Google Maps

پایان افکار

این برداشت ما از نحوه اضافه کردن نقشه های گوگل به وب سایت Divi شما است. کلید Google Maps API به راحتی به Divi اضافه می شود. هنگامی که کلید API به Divi اضافه می شود، هر ماژول نقشه به طور خودکار به کلید دسترسی دارد. در صورت تمایل حتی می توانید کلید API را بر اساس هر ماژول تغییر دهید. تنها کاری که باید انجام دهید این است که آدرسی را که می خواهید ماژول نقشه شما نمایش دهد اضافه کنید. سریع‌تر از جاسازی بارگیری می‌شود، گزینه‌های سبک زیادی را ارائه می‌دهد و می‌توانید هر تعداد کارت را در صفحات و قالب‌های Divi خود نمایش دهید.

ما می خواهیم از تو بشنویم. آیا Google Maps API را به وب سایت Divi خود اضافه کرده اید؟ تجربیات خود را در نظرات با ما در میان بگذارید.