پنج شنبه , ۱۹ مرداد ۱۳۹۶

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

یکی از سوالات مشتریان سفارش طراحی سایت این است که چگونه می توانند آدرس محل کارشان را در نقشه گوگل در سایت خود نمایش دهند؟ یکی از ویژگی های نقشه گوگل این است که شما می توانید آدرس محل خود را در نقشه گوگل در سایت خود نمایش دهید. این موضوع به سادگی و در کمتر از یک دقیقه امکان پذیر است.

برای اینکه در سایت خود آدرسی را در نقشه گوگل نمایش دهید مراحل زیر را انجام دهید:

 

۱. ابتدا مختصات خود را از طریق سایت latlong.net بدست آورید. ( کافی است محل خود را در نقشه گوگل در سایت فوق بیابید تا مختصات دقیق شما را به شما بدهد)

۲. یک صفحه اچ تی ام ال ایجاد کنید و کد های زیر را در آن قرار دهید:

 

!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(35.697434, 51.388287);          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>فن آوران پیشرو ارتباط</h4>' +                                       '<h5>طراحی سایت آسان</h5>' +                                       '</div>';                      var infowindow = new google.maps.InfoWindow({            content: contentString          });                      var marker = new google.maps.Marker({            position: myLatlng,            map: map,            title: 'EWD.ir'          });                      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>

 

توضیح کد بالا:

در خط شانزدهم مختصات خودتان را جایگزین این مختصات کنید.

در خط هجدهم میتوانید مقدار zoom را مشخص کنید.

در خط بیست و پنجم توضیحاتی که قرار است در Box سفید نمایش داده شود را باید قرار دهید.

در خط سی و هفتم عنوان محل مورد نظر را میتوانید قرار دهید.

به همین سادگی توانستیم یک محل را در Google map مارک کرده و به دیگران ارائه دهیم.

 

دقت کنید که در در خط ۱۶ کد های مختصات خود را قرار دهید.

مشاهده خروجی کد های بالا:

http://www.ewd-co.com/DEMO/google.html

منبع : طراحی سایت آسان

درباره ی محمد رجبی

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

16 + 19 =