نقشه گوگل یکی از امکانات پرطرفدار گوگل می باشد که کاربران بسیار زیادی از آن استفاده می کنند . وبمستران نیز دور از این کاربران نیستند و از آن به بهترین نحو استفاده می کنند . برخی از وبمستران اقدام به نمایش نقشه های گوگل در سایت خود می باشند که توسط آن محل کار ، همایش و … را به طور دقیق به کاربران خود نمایش دهند . برای نمایش نقشه های گوگل در سایت های وردپرس افزونه وجود دارد اما ما استفاده از کد را به شما پیشنهاد می دهیم ؛ زیرا افزونه ها فشار بسیار زیادی به سرور سایت شما خواهند آورد و منابع زیادی مصرف می کنند . در این مطلب قصد داریم آموزش استفاده از نقشه گوگل در سایت وردپرس و غیر وردپرس خود ( حتی سایت های استاتیک ! ) را ارائه کنیم . در ادامه با ما و آموزش نمایش نقشه گوگل با استفاده از کد همراه باشید .

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

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

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

برای اینکار ابتدا وارد نام کاربری خود در گوگل مپ ( Google map ) شوید . در صورتی که در سرویس دهنده های گوگل ثبت نام نکرده اید ، می توانید ثبت نام کنید . سپس مکان مورد نظر خود را پیدا کرده و بر روی آن کلیک راست نمایید تا گزینه های آن ظاهر شود . با استفاده از گزینه ی What’s 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 موجود در کد های بالا نمایید . برای یافتن مختصات در بین کد ها می توانید با استفاده از کلید های ctrl+F یا F3 استفاده کنید . همچنین به جای کلمه ی Doctor wordpress نام یا آدرس محل مورد نظر خود را وارد نمایید . اکنون نقشه ی گوگل در هر بخشی که این کد را قرار داده اید ، قابل مشاهده است .

امتیاز شما از 1 تا 5
1 ستاره میدم به نوشته2 ستاره میدم به نوشته3 ستاره میدم به نوشته4 ستاره میدم به نوشته5 ستاره میدم به نوشته 4 رای
Loading...