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

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

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

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

برای اینکار ابتدا وارد نام کاربری خود در گوگل مپ ( 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 نام یا آدرس محل مورد نظر خود را وارد نمایید . اکنون نقشه ی گوگل در هر بخشی که این کد را قرار داده اید ، قابل مشاهده است .

امتیاز شما برای این مقاله
ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.