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

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

 

گام اول – دریافت کد جاسازی یا Embed گوگل مپ

به گوگل مپ مراجعه کنید .

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

روی لینک Share کلیک کنید .

 

  1. Embed Map را انتخاب کنید .
  2. iframe code  را انتخاب کنید .
  3. راست کلیک کنید و کد  Embed را کپی کنید

 

گام دوم – استفاده از کد جاسازی یا Embed Code گوگل مپ

کد جاسازی یا Embed Code که مانند زیر است را در سایت خود قرار دهید :

 

گام سوم – دستکاری کد جاسازی یا Embed Code گوگل مپ

یک تگ  div به دور کد گوگل مپ اضافه کنید و کلاسی به اسم  map-responsive یا اسم دلخواه را به آن اضافه کنید :

 

گام چهارم و پایانی – افزودن کدهای CSS به نقشه گوگل

اکنون کدهای css زیر را به فایل style.css یا rtl.css یا بخش تنظیمات css سفارشی قالب سایت خود اضافه کنید :

 

پیشنهاد می کنیم برای دریافت آخرین مطالب کانال تلگرام کانی تمزرا دنبال کنید .