جستجو برای:
  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت
 
  • 02144824488
  • info@myhamyar.com
  • بلاگ
  • تماس با ما
  • درباره ما
همیارِمَن  | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیک
دسترسی سریع
  • پشتیبان سایت
0

ورود و ثبت نام

  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت

بلاگ

همیارِمَن | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیکبلاگدوره های رایگانراهنمای قرار دادن نقشه گوگل در سایت

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

10 شهریور 1400
ارسال شده توسط همیار من
دوره های رایگان ، مقالات
483 بازدید
همیار من

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1
2
3
4
<br /><br />
<div style="width:500px;max-width: 100%;height:300px;"><br /><br />
     کد دریافت شده<br /><br />
</div>

 

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<br /><br /><br /><br /><br />
<!DOCTYPE html><br /><br /><br /><br /><br />
<html><br /><br /><br /><br /><br />
<body></p><br /><br /><br /><br />
<p><h1>My First Google Map</h1></p><br /><br /><br /><br />
<p><div id="googleMap" style="width:100%;height:400px;"></div></p><br /><br /><br /><br />
<p><script><br /><br /><br /><br /><br />
function myMap() {<br /><br /><br /><br /><br />
var mapProp= {<br /><br /><br /><br /><br />
  center:new google.maps.LatLng(51.508742,-0.120850),<br /><br /><br /><br /><br />
  zoom:5,<br /><br /><br /><br /><br />
};<br /><br /><br /><br /><br />
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);<br /><br /><br /><br /><br />
}<br /><br /><br /><br /><br />
</script></p><br /><br /><br /><br />
<p><script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script></p><br /><br /><br /><br />
<p></body><br /><br /><br /><br /><br />
</html>

 

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

بیشتر بخوانیم:

  • لینک سازی PBN چگونه است؟
  • آموزش افزونه Sucuri Security برای افزایش امنیت وردپرس
  • آموزش گام به گام نصب افزونه وردپرس

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

مطالب زیر را حتما مطالعه کنید

لوگو ادمین سایت

آموزش انیمیشن‌سازی با CSS

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

کسب درآمد از آموزش آنلاین چگونه است؟

اگر تصور می کنید برای شروع یک کسب و کار جدید باید حتما سرمایه زیادی...
همیارمن

بهترین ابزارهای رایگان برای حذف پس زمینه تصاویر

برای حذف پس زمینه تصاویر ابزارهای متعددی در اینترنت وجود دارد. هر کدام از آن‌ها...
همیارمن

افزایش امنیت پیج اینستاگرام 😎😎

افزایش امنیت پیج اینستاگرام از جمله مسائلی است که اقشار مختلف جامعه را درگیر خود...
همیارمن

آموزش افزودن تصویر به دسته بندی در وردپرس

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

راه های خنک کردن گوشی موبایل های داغ شده

تا چند سال پیش، نهایت کاری که گوشی‌های موبایل برای ما انجام می‌دادند، ارسال پیامک...

دیدگاهتان را بنویسید لغو پاسخ

جستجو در همیارمَن
جستجو برای:
  • آموزش مجازی
  • اخبار سینما
  • افزونه وردپرس
    • آموزش افزونه وردپرس
  • بازی
  • پیشنهادی
  • دسته‌بندی نشده
  • دوره های رایگان
  • سریال
  • فناوری
  • فیلم
    • اکشن
    • تاریخی
    • ترسناک
    • جنایی
    • کمدی
    • مستند
    • معمایی
    • هیجان انگیز
    • ورزشی
  • قالب HTML
  • قالب وردپرس
    • قالب خبری و وبلاگ
    • قالب شرکتی
    • قالب نمونه کار
    • قالب های چند منظوره
  • مقالات
    • بازایابی دیجیتال
    • برنامه نویسی
    • تولید و بازاریابی محتوا
    • طراحی و گرافیک
آخرین مطالب سایت
  • آموزش انیمیشن‌سازی با CSS
  • بهترین فیلم های اسلشر تاریخ سینما
  • نقد فیلم Cure – یک فیلم هیپنوتیزم کننده
  • نقد فیلم یتیم Orphan: First Kill
  • کسب درآمد از آموزش آنلاین چگونه است؟
برچسب‌ها
CSS HTML آموزش آموزش CSS آموزش css3 آموزش css3 pdf آموزش css3 رایگان آموزش css3 پیشرفته آموزش css pdf آموزش css حرفه ای آموزش css و html آموزش css پروژه محور آموزش css پیشرفته آموزش افزونه وردپرس آموزش تولید محتوا آموزش رایگان html همیارمن آموزش رایگان زبان html آموزش وب سایت افزونه وردپرس بازاریابی بازاریابی دیجیتال بازی بررسی بررسی بازی تولید محتوا دانلود افزونه وردپرس دانلود قالب وردپرس دوره دوره رایگان دیجیتال مارکتینگ سایت فناوری فیلم قالب قالب سایت قالب وب سایت قالب وردپرس نقد نقد بازی نقد فیلم نقد و بررسی نقد و بررسی بازی نقد و بررسی فیلم وردپرس ووکامرس

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت