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

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

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

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

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

<!–

–>

<!–



!
–>

لطفا چند ثانیه زمان بگذارید !


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

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

Loading…

You Might Also Like

دیدگاهتان را بنویسید

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