ساخت نقشه در سایت

آموزش حرفه ای دور زدن تحریم گوگل: ایجاد نقشه گوگل در دامنه IR

همان‌طور که خبردارید گوگل تحریم‌های جدیدی علیه کاربران ایرانی ایجاد کرده است. در این نوع تحریم دامنه‌هایی که پسوند IR دارند نمی‌توانند دسترسی به API های گوگل داشته باشند. بیشترین مشکلی که این موضوع برای کاربران ایرانی ایجاد می‌کند دو موضوع است:

  • کاربرانی که در وب‌سایت اینترنتی خود نقشه گوگل استفاده کرده‌اند
  • کاربرانی که در اپلیکیشن های موبایلی از خدمات نقشه گوگل یا API های گوگل استفاده می‌کنند مانند تاکسی‌های اینترنتی.

البته کسب‌وکارهایی که دارای دامنه‌های .com و دیگر دامنه‌های غیر ایرانی هستند این مشکل را ندارند. در این مقاله ما قرار است برای رفع مشکل عدم نمایش گوگل مپ در سایت دو روش ارائه بدهیم که هم کاربران وردپرسی بتوانند از این روش‌ها استفاده کنند و هم کاربران غیر وردپرسی.

پیام خطای نقشه گوگل برای برخی از وبسایت های دامنه IR
پیام خطای نقشه گوگل برای برخی از وبسایت های دامنه IR

API چیست؟

قبل از اینکه به روش دور زدن تحریم گوگل مپ بپردازیم باید با مفهوم API ها آشنا شویم. به صورت مختصر باید بگویم API که مخفف Application programming interface است، یعنی رابط برنامه‌نویسی، رابط بین یک کتابخانه یاسیستم‌عامل و برنامه‌هایی است که از آن تقاضای سرویس می‌کنند. شما می توانید API گوگل مپ را در وب سایت یا سرویس خود داشته باشید که با استفاده از آن سرویس گوگل مپ را درون وب سایت خود داشته باشید و از آن استفاده کنید.

aip چگونه عمل میکند

آشنایی با شرکت OpenLayers

در حالت عادی ما باید برای نمایش نقشه در سایت ابتدا یک api از گوگل بگیریم و بعد با قرار دادن آن در سایتمان استفاده کنیم. اما گوگل تنها شرکتی نیست که سرویس خدمات نقشه را ارائه میدهد. شرکت OpenLayers نیز خدمات ارائه نقشه را در اختیار کاربران قرار میدهد. این شرکت یک موتور یا engine برای نمایش نقشه ایجاد کرده که به صورت رایگان و بدون نیاز به API میتوانید از آن استفاده کنید.

حالا که دیدیم شرکت های دیگری هم هستند که خدمات نقشه را در اختیار کاربران قرار میدهند میتوانیم برای سایت خودمان نیز از این خدمات رایگان استفاده کنیم.

1- رفع مشکل نقشه برای کاربران وردپرس

پیشنهاد ما استفاده از افزونه WP Google Maps است.شما میتوانید با دریافت و فعال سازی این افزونه به راحتی و بدون نیاز به انجام کاری اضافی خواهید توانست نقشه محل شرکت خود را در سایت وردپرسی تان داشته باشید. این افزونه قابلیت پشتیبانی از دو نوع موتور نمایش نقشه را دارد: 1- موتور گوگل مپ 2- موتور OpenLayers. که ما در این مقاله روی قسمت دوم که برای دور زدن تحریم مورد نیاز است تمرکز میکنیم.

راستی در انتهای همین صفحه لینک های دانلود این افزونه را هم برای شما قرار داده ایم.

امکانات افزونه WP Google Maps

  • محبوب ترین افزونه نقشه گوگل در وردپرس
  • استفاده همزمان از چندین مارکر
  • نقشه های رسپانسیو
  • دارای 9 تم رنگی مختلف ( اگر انجین شما گوگل باشد)
  • قابلیت کشیدن و Drag کردن مارکر روی نقشه
  • پشتیبانی از Streetview برای نقشه ها
  • دارای ویجت نقشه
  • تنظیم مقدار زوم پیش فرض
  • پشتیبانی از نوشتن توضیحات مارکر

نکته مهمی که باعث شد از این افزونه استفاده کنیم این است که افزونه WP Google Maps از دو موتور گوگل و OpenLayers استفاده میکند. موتور گوگل نیاز به API دارد ولی موتور رایگان OpenLayers نیازی به آن ندارد. بعد از نصب و راه اندازی این افزونه به قسمت تنظیمات افزونه مطابق شکل زیر بروید و گزینه Map Engine را روی OpenLayers تنظیم کنید.

حالا میرویم تا نقشه برای وب سایتمان ایجاد کنیم. در کنترل پنل وردپرس از قسمت ” نقشه ها ” وارد منوی اول یعنی نقشه ها شوید. حالا روی گزینه ” اولین نقشه من” کلیک کنید.

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

تنظیم نقشه گوگل مپ

مشخص کردن محل مورد نظر شما به راحتی و با کشیدن موس و زوم کردن انجام می شود. وقتی قصد داشتید محل مورد نظر خودتان را نشانه گزاری کنید کافی است تا یک بار روی نقشه کلیک راست کنید تا نشانه اضافه شود. نگران جا به جایی این نشانه نباشید چون این کار هم به راحتی انجام میشود. در نهایت روی گزینه save marker کلیک کنید.

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

2- اضافه کردن نقشه خود گوگل با استفاده از دامنه کمکی

در روش قبلی بسیاری از امکانات خوب گوگل را نمیتوانستیم استفاده کنیم و اینکه ظاهر نقشه ما هم مانند نقشه گوگل زیبا نبود ، به همین علت ما در این روش از کد نویسی با تگ HTML استفاده خواهیم کرد. تگ مورد استفاده ما iframe است که محتویات سایت های دیگر را در داخل سایت شما نشان میدهد و شما میتوانید در یک دامنه .com نقشه گوگل خود را بسازید و در دامنه .IR خود از این تگ استفاده کنید و نقشه را از سایت دیگری خود بخوانید .در این روش ما به دو چیز نیاز داریم:

1- داشتن نقشه گوگل آماده در یک دامنه غیر IR

2- اضافه کردن تگ iframe در سایت IR شما

روش کار خیلی ساده است. کافی هست تا کد زیر را کپی کنید و طول و ارتفاع مورد نیازتان را مشخص کنید. و آدرس مقصد خود را وارد کنید. نکته ای که اینجا باید بهش اشاره کنم این هست که اگر سایت IR شما از گواهی ssl استفاده میکند باید حتما سایت .com شما نیز از این گواهی استفاده کند.

<iframe src="https://sabzwp.com" height="400" width="600"></iframe>

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

مثال عملی:

برای تست عمل لود شدن نقشه گوگل مپ در تگ iframe تست زیر را انجام می دهیم.

در زیر ما یک نقشه گوگل از سایت معروف تولید کننده قالب وردپرس را که muffingroup است را در تگ iframe قرار دادیم. البته چون ما دسترسی به سایت آن ها نداریم نمیتوانیم المان های اضافه را حذف کنیم. اما اگر شما در دامنه کمکی خودتان دسترسی کامل دارید حتما المان های اضافی مانند هدر سایت و فوتر و ساید بار را حذف کنید و فقط نقشه را بگزارید بماند. البته در این مثال

الان ممکن است باز هم این سوال برای شما پیش بیاید که دامنه ما sabzwp.com است و اگر در دامنه IR از کد iframe استفاده کنیم باز هم جواب نخواهد داد. اما ما این مورد را تست کردیم و جواب کامل گرفتیم. نتیجه این تست را هم اینجا میتوانید مشاهده کنید.

3- استفاده از گوگل مپ به طور مستقیم

شما میتوانید با استفاده از تگ iframe به طور مستقیم نیز نقشه گوگل را در سایت خود در دامنه IR نمایش دهید. ایرادی که این روش دارد این است که نمیتوانید از علامت marker یا تعیین مختصات استفاده کنید.

کافی است تا به گوگل مپ بروید و سپس قسمتی را که میخواهید را پیدا کنید. مانند تصویر زیر روی گزینه share or embed کلیک کنید.

embed google map

حالا طبق تصویر زیر گزینه embed a map را انتخاب کنید و سپس سایز نمایش را در مرحله دوم انتخاب کنید. در مرحله آخر نیز کد iframe تولید شده را کپی کنید.

embed google map

همان طور که در روش دوم اشاره کردیم این کد را در قسمت html سفارشی وارد کنید. نتیجه یک نقشه مانند زیر است که البته اشاره هم کردیم که نمیتوانیم marker یا محلی که میخواهیم علامت گزاری کنیم را استفاده کنیم.

برای چک کردن نتیجه روی دامنه IR اینجا کلیک کنید.

, ,
نوشتهٔ بعدی
ایجاد بنر گوشه سایت بدون افزونه
نوشتهٔ پیشین
چرا نماد اعتماد الکترونیکی در سئو تاثیر منفی دارد؟

مطالب مرتبط

۱۰ دیدگاه. دیدگاه جدید بگذارید

سایت جوانه زرین را در گوگل سرچ کنید. مثل این سایت اگر نقطه بزنیم مشکل حل میشه خیلی راحت و بدون دردسر. نیاز به api key هم نداره

پاسخ

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

پاسخ

    سلام
    ما هم تست کردیم و هم جواب گرفتیم
    یکی از دلایلی که این مورد نمیتونه کار کنه گواهی ssl هست.
    یعنی اگر سایت شما گواهی ssl دارد ولی سایت مقصد که قصد دارید به آن لینک iframe بدهید گواهی ssl نداشته باشد درخواست ها بلاک میشود و کار نمیکند.

    پاسخ

      برای من فرقی نمی کنه. در پاسخ ایمیل توضیح کامل بهتون دادم. می تونید روی اشتباهتون پافشاری کنید. من با ۱۵ سال سابقه برنامه نویسی و با حرف مستدل ازتون خواستم مطلب اشتباه رو از سایتتون بردارید. انتخاب با شماست که تصحیح کنید و بپذیرید یا اینکه بر اشتباهتون پافشاری کنید.
      پیروز باشید

      پاسخ

        خیلی جالب هست
        توی انتهای همین مطلب با تگ iframe از یک وبسایت دیگه نقشه گوگل را لود کردیم و تست کردیم
        و شما دوباره پیام گزاشتید ما اشتباه میکنیم و این روش جواب نمیده.
        عجب!!!

        پاسخ

          هنوز این مطلب رو بر نداشتید؟!!!! عجب!!!
          در راهکار دومتون مثالی که زدید، سایتی را باز کرده که خودش از راهکار سومتون استفاده کرده نه از api
          یعنی یه سایت راهکار سوم رو پیاده سازی کرده، شما هم دارید با IFrame اونو نشون می دید.
          اگر تونستید با راهکار دومتون، سایتی را مثال بزنید که از api استفاده می کنه حرفتون صحیحه
          من انجامش دادم، می دونم که نمی شه. از نظر فنی هم امکانش وجود نداره

          راه دوم را یکبار دیگر چک کنید
          ما تونستیم انجام بدیم حالا شما بگید نمیشه دوباره
          برای چک کردن اینجا کلیک کنید.
          از نظر فنی هم اصولا نباید امکانش باشه اما تست کردیم و دیدیم که شد!!!

با سلام.
خیلی تشکر از توضیح کاملتون. خواستم بگم شرکتهای ایرانی هم هستند که سرویس نقشه دارند و افزونه وردپرس هم دارند. خوبه که تبلیغ این افزونه ها رو هم بکنیم که کسب و کارشون بهتر بشه. از جمله این دو تا:
http://corp.map.ir/map-services/api-services/developers/#npm
https://www.cedarmaps.com/

پاسخ

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

    پاسخ

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Fill out this field
Fill out this field
لطفاً یک نشانی ایمیل معتبر بنویسید.
You need to agree with the terms to proceed

فهرست



با ساخت حساب کاربری و سپس خریداری رایگان این محصول
 از به روز رسانی های آینده نیز مطلع خواهید بود