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

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

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

برای اینکار ابتدا وارد نام کاربری خود در گوگل مپ ( Google map ) شوید . در صورتی که در سرویس دهنده های گوگل ثبت نام نکرده اید ، می توانید ثبت نام کنید . سپس مکان مورد نظر خود را پیدا کرده و بر روی آن کلیک راست نمایید تا گزینه های آن ظاهر شود . با استفاده از گزینه ی What’s here می توانید مختصات مکان مورد نظر خود را بیابید که با رنگ آبی و به صورت عددی نمایش داده می شود . مختصات بدست آمده را در بخشی ذخیره کنید و در ادامه به کاربرد آن خواهیم پرداخت .

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

 !DOCTYPE HTML html lang="en" head     meta charset="UTF-8" /     titleGoogle 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.expsensor=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;"' +                                      'h4Marvdasht , Takhte Jamshid/h4' +                                       'h5Takhte 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

اکنون مختصاتی که در مرحله قبل بدست آوردید را جایگزین مختصات ۲۹.۹۳۵۷۱۱, ۵۲.۸۸۷۷۰۲ موجود در کد های بالا نمایید . برای یافتن مختصات در بین کد ها می توانید با استفاده از کلید های ctrl+F یا F3 استفاده کنید . همچنین به جای کلمه ی Doctor wordpress نام یا آدرس محل مورد نظر خود را وارد نمایید . اکنون نقشه ی گوگل در هر بخشی که این کد را قرار داده اید ، قابل مشاهده است .

<!–

–>

<!–

!
–>

آموزش وردپرس | آموزش طراحی سایت | آموزش طراحی قالب وردپرس

آموزش وردپرس | آموزش طراحی سایت | آموزش طراحی قالب وردپرس