آموزش استفاده از گوگل مپ در سایت ( افزودن نقشه گوگل به صفحات وب‌سایت)


نویسنده:
یکشنبه 3 فروردین 1399
قرار دادن نقشه گوگل در سایت

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

با درج نقشه و نمایش لوکیشن، کاربران آدرس دقیق دفترکار شما را مشاهده می‌کنند و به وجود فیزیکی دفترکار شما بیشتر مطمئن می‌شوند. این نکته یکی از مهمترین نکات در سئو محلی یا لوکال هم محسوب می‌شود. همراه ما باشید تا نحوه‌ی اضافه کردن نقشه‌ی گوگل را بررسی کنیم.

نحوه‌ی استفاده از گوگل مپ در سایت

برای قرار دادن نقشه گوگل در سایت خود چند راه دارید که روش اول رایگان است.

روش اول) استفاده از نقشه گوگل به روش embed

گام اول- وارد وب‌سایت google map شوید و آدرس مدنظر خود را در آن بیابید. روی نقطه مورد نظر کلیک راست کرده و گزینه‌ what is here را انتخاب نمایید.

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

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

پیدا کردن کسب‌وکار خود در مپ

گام دوم – یک کادر جدید در زیر صفحه باز می‌شود که باید روی فلش آبی رنگ کلیک کنید.

دریافت لوکیشن

گام سوم – در صفحه‌ی بازشده روی آیکون منو کلیک کنید تا منو باز شود. اکنون روی share or embede map کلیک کنید.

انتخاب گزینه‌ی اشتراک لوکیشن

گام چهارم – در این کادر باز شده در تب embed a map‌ کدی را دریافت می‌کنید که می توانید نقشه را به کمک آن در سایت خود نمایش دهید. با کلیک روی copy html کد را کپی کنید.

دریافت کد نمایش نقشه در وب ‌سایت

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

در وردپرس می‌توانید در برگه یا نوشته‌ی مورد نظر خود به کمک گوتنبرگ یک بلوک HTML سفارشی ایجاد کرده و کد را در آن paste کنید. به همین راحتی!

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

برای رسپانسیو شدن کد و زیبایی بیشتر، کد را درون یک تگ div‌ قرار می دهیم:



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

برای مثال کد دریافتی من برای ادمین سایت به شکل زیر است:


روش دوم ) استفاده از api گوگل برای نمایش نقشه

این روش در گذشته بسیار مرسوم بوده اما اکنون به دلیل پولی شدن api گوگل معمولا استفاده نمی‌شود. برای استفاده از نقشه‌ی گوگل به کمک api باید ابتدا موقعیت جغرافی مدنظر خود را در نقشه بیابید. برای اینکار به وب‌سایت google map بروید و مراحل زیر را دنبال کنید:

موقعیت مدنظر خود را در نقشه پیدا کنید و روی آن نقطه کلیک راست کنید. سپس روی گزینه‌ی whatis here کلیک کنید.

استفاده از api گوگل برای نمایش نقشه

اکنون گوگل موقعیت آن نقطه را بر حسب دو عدد مشخص می‌کند. این دو عدد را یاداشت کنید تا در کد‌های نقشه از آنها استفاده کنیم. حالا به این صفحه رفته و api خود را دریافت نمایید.

سپس به سراغ کد html‌ زیر بروید.

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

مطالب زیر را حتما بخوانید

آموزش نحوه افزودن کدهای css به قالب وردپرس + با افزونه

در این مقاله روش‌هایی را برای افزودن css به وردپرس معرفی می‌کنیم تا بتوانید وب‌سایت خود را شخصی‌سازی کنید.

نمایش مطالب بیشتر با Ajax بدون افزونه در وردپرس

در این مقاله قصد داریم نحوه‌ی نمایش مطالب بیشتر با Ajax را به صورت مرحله به مرحله بررسی کنیم. به...

کار با زمینه‌های دلخواه وردپرس | بدون نیاز به افزونه

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

ایجاد صفحه بندی در وردپرس بدون نیاز به افزونه

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

دیدگاهتان را بنویسید

12 پاسخ به “آموزش استفاده از گوگل مپ در سایت ( افزودن نقشه گوگل به صفحات وب‌سایت)”

  1. علیرضا گفت:

    تمام کمال بدون مشکل انجام شد ، ممنون از شما

  2. javadi گفت:

    ممنون از سایت خوبتون

  3. مقامی گفت:

    با سلام و روزبخیر بابت تغییر نقشه از گوگل مپ بر روی سایت خودمان اقدام کردیم تغییری ایجاد نشد لطفا راهنمایی بفرمایید

  4. فاطمه علیزاده گفت:

    سلام، روی تصویر گوگل مپ که در فوتر سایتم قرار گرفته این عبارت (19 min drive – home ) وجود داره چجوری میتونم این تایم رو حذف کنم؟

  5. ابو امیر گفت:

    با سلام
    روش وسط چین کردن نقشه در مقاله سایت چیست؟
    با تشکر

  6. ابراهیمی گفت:

    عالی بود . با تشکر

  7. محمد گفت:

    سلام ایا میشود دو تا موقعیت مکانی را در یک نقشه نشان داد و درون سایت گذاشت ؟

    • سلام بله میشه اما در ایران رو (با توجه به محدودیتی که برای مپ ایجاد شده) نمیدونم باید تست کنید. روش اول استفاده از همون توضیحات بالاست که در نقشه ۲ تا لوکیشن رو انتخاب کنید. روش دوم پلاگین GoogleMapsWidget هستش.

دیدگاهتان را بنویسید