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

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

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

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

برای اینکار ابتدا وارد نام کاربری خود در گوگل مپ ( 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…

گفتگو کنید

55 نظر

  1. Hey would you mind sharing which blog platform you’re using?
    I’m going to start my own blog soon but I’m having a difficult time selecting between BlogEngine/Wordpress/B2evolution and Drupal.
    The reason I ask is because your layout seems different then most blogs and I’m
    looking for something unique. P.S My apologies for getting off-topic but I had to ask!

  2. It’s tthe bst time too makoe somne plaans for thhe futuure and it’s timee to bee happy.

    I’ve read this postt annd iff I could I desire tto suggest you some intteresting things oor tips.
    Maybbe yyou coupd rite next articles referring tto
    this article. I dsire tto read evenn more things
    about it!

  3. Woah! I’m really enjoying the template/theme of
    this site. It’s simple, yet effective. A lot of times it’s hard to get that
    “perfect balance” between superb usability and appearance.
    I must say you have done a great job with this. Also, the
    blog loads extremely fast for me on Firefox.
    Superb Blog!

  4. Woah! I’m really loving the template/theme of this website.
    It’s simple, yet effective. A lot of times it’s hard to
    get that “perfect balance” between user friendliness and visual appeal.
    I must say you have done a very good job with this. Additionally,
    the blog loads extremely quick for me on Safari.
    Excellent Blog!

نظر دهید