ثبت‌نام ورود

نمایش گوگل مپ در سایت با کد HTML

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

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

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

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

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

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

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

برای این کار شما باید در وهله اول وارد maps.google.com شوید. با رفتن به این آدرس اینترنتی، یک نقشه برای شما باز خواهد شد که شما باید از روی آن، مکان موردنظر خودتان را پیدا کنید و بر روی آن راست کلیک کنید.

در این قسمت، یک پنجره برای شما باز خواهد شد که باید بر روی گزینه “Whats Here” کلیک کنید؛ مطابق تصویر زیر:

انتخاب گزینه  Whats Here
انتخاب گزینه Whats Here

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

کپی کردن مختصات
کپی کردن مختصات

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

جایگذاری مختصات
جایگذاری مختصات

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

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Google Maps</title>
    <style type="text/css">
      #map-canvas{
        width: 700px;
        height: 500px;
        margin: 0 auto;
      }
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script type="text/javascript">
       function initialize() {
         var myLatlng = new google.maps.LatLng(29.935711, 52.887702);
         var mapOptions = {
           zoom: 15,
           center: myLatlng,
           mapTypeId: google.maps.MapTypeId.ROADMAP
         }
          
         var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
          
         var contentString = '<div style="direction: rtl; text-align: right;font-family: Tahoma;">' +
                                     '<h4>Marvdasht , Takhte Jamshid</h4>' +
                                      '<h5>Takhte Jamshid</h5>' +
                                      '</div>';
          
         var infowindow = new google.maps.InfoWindow({
           content: contentString
         });
          
         var marker = new google.maps.Marker({
           position: myLatlng,
           map: map,
           title: 'Takhte Jamshid'
         });
          
         infowindow.open(map, marker);
         google.maps.event.addListener(marker, 'click', function() {
           infowindow.open(map, marker);
         });
       }
    </script>
</head>
<body onload="initialize()">
    <div id="map-canvas"></div>
</body>
</html>

خب حالا باید مختصاتی که در مرحله بعد به‌دست آوردید را در کدهای بالا جایگذاری کنید. کد موردنظر خودتان را به‌جای ” 29.935711, 52.887702″ قرار دهید تا نقشه با مختصات موقعیت شما نمایش داده شود.

همچنین در کد بالا باید به‌جای کلمه Takhte Jamshid، را به کلمه موردنظر خودتان و اسم مکان موردنظر تغییر دهید و از نمایش آدرس محل کار خودتان بر روی سایت لذت ببرید. به همین راحتی!

امیدواریم با کمک این مقاله توانسته باشید به‌راحتی نمایش گوگل مپ در سایت را انجام دهید. راستی! حتما دو مقاله تحریم گوگل مپ برای دامنه‌های ایرانی و پولی شدن نقشه گوگل را مطالعه کنید. موفق و سربلند باشید. 🙂

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام میهن وردپرس عضو شوید.

نظر شما در این‌باره چیست؟

  1. U19832 ۰۱ مهر ۱۳۹۸

    سلام , من این کد رو که قرار میدم تو سایت هیچ اطلاعاتی نشون نمیده.فقط یه صفحه سیاه خالی

  2. U19832 ۲۸ شهریور ۱۳۹۸

    سلام ، کد رو چجوری به قالب اضافه کنم ؟

  3. کاربر مهمان ۰۶ تیر ۱۳۹۵

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

    • رضا حسینی راد رضا حسینی راد ۰۷ تیر ۱۳۹۵

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

  4. کاربر مهمان ۱۳ خرداد ۱۳۹۵

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

    • رضا حسینی راد رضا حسینی راد ۱۳ خرداد ۱۳۹۵

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

      • کاربر مهمان ۱۰ تیر ۱۳۹۵

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

  5. کاربر مهمان ۰۹ خرداد ۱۳۹۵