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

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

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

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

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

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

روش اول) استفاده از نقشه گوگل به روش 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، کد دریافتی خود را بگذارید. سپس این کد را در صفحه‌ای که قصد نمایش نقشه گوگل را دارید، قرار دهید.