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

4.1 / 5. تعداد رای: 7

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

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

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

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

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

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

کد 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. U34403 ۲۱ دی ۱۳۹۹

    اقای حسینی سلام من روی سایتم کد رو دادم میخواستم روی قسمت پایین سایت یا همون پاورقی بیاد بعد خودم برنامه نویسی خوندم مطمعنم مشکل از کد نیست اروری ام نداد ولی نمیاره من فکر کنم بخاطر اینه که دامینم ایرانه یا همون .ir هستش

    • Reza Rad رضا راد ۲۲ دی ۱۳۹۹

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

  2. U19832 ۱ مهر ۱۳۹۸

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

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

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

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

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

    • Reza Rad رضا راد ۷ تیر ۱۳۹۵

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

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

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

    • Reza Rad رضا راد ۱۳ خرداد ۱۳۹۵

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

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

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

    • U38457 ۱۰ فروردین ۱۴۰۰

      سلام. چطور میتونم سفارش یه پروژه مبتنی بر همین پروژه که گذاشتید رو بهتون بدم؟

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