تخفیف ویژه

آموزش استفاده از نقشه گوگل در صفحات وب - Google Maps (جلسه 14) - کار با Info Windows

دسته بندی: آموزش
زمان مطالعه: 6 دقیقه
۲۵ تیر ۱۳۹۵

در این مطلب با ادامه آموزش Google Maps در خدمتتون هستیم.

google-maps

علاوه بر marker یا نشانه، چند ضلعی، دایره، مستطیل و بقیه اشکال موجود، ما همچنین میتونیم باکسها یا پنجره‌های اطلاعاتی یا Info Windows رو بر روی نقشه نمایش بدیم و با استفاده از اون، متنی رو به کاربر نمایش بدیم. این مطلب به شما آموزش میده که چطور از Info Windows استفاده کنید و نقشتون رو پیشرفته‌تر کنید.

اضافه کردن یک Window

Info Windows برای افزودن هر گونه متن و اطلاعاتی به نقشه مورد استفاده قرار میگیره. برای مثال، اگر شما بخواید اطلاعاتی در مورد یک نقطه خاص بر روی نقشه قرار بدید، شما میتونین از Info Window استفاده کنید. بطور معمول و عمدتا Info Window به نشانه یا Marker متصل و ربط داده میشه. شما میتونین برای ساختن یک Info Window یک نمونه جدید از شئ google.maps.InfoWindow رو بسازید. این مورد ویژگی‌های زیر رو پوشش میده:

  • Content : با استفاده از این ویژگی میتونین رشته متنی که قصد دارید در Window نمایش داده بشه رو مشخص کنید.
  • position : با استفاده از این ویژگی میتونین مختصات جغرافیایی نقطه ای که میخاید Window در اونجا نمایش داده بشه رو مشخص کنید.
  • maxWidth : بصورت پیش فرض Widnow به اندازه ای طولش زیاد میشه که تمام محتویاتش رو نمایش بده، اما شما میتونین برای اون یک ماکزیمم مشخص کنید که از اون بیشتر نشه.

مثال زیر رو ببینید:

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "http://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
         
            var mapOptions = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var infowindow = new google.maps.InfoWindow({
               content:"388-A , Road no 22, Jubilee Hills, Hyderabad Telangana, INDIA-500033",
               position: new google.maps.LatLng(20.433053, 78.412172),
               maxWidth: 200
            });
            
            infowindow.open(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

خروجی:info window google maps

همچنین شما میتونین یک Info Window رو به یک نشانه یا Marker نسبت بدین و هر کاری که با Marker صورت بگیره، Info Window هم رفتار متناسب با اون نمایش میده. برای مثال کد زیر رو ببینید:

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "http://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
         
            var mapOptions = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.433053, 78.412172),
               map: map,
               draggable:true
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"Mohammad Esfandiari, <a href='http://farsial.com'>Farsial</a>"
            });
            
            infowindow.open(map,marker);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

خروجی بصورت زیر هست:add window to marker google maps

همونطور که دیدید با درگ کردن نشانه، Window نیز همراه با اون جابجا میشه. همونطور که دیدید در ویژگی content میتونیم کدهای HTML هم وارد کنیم و درون Window نمایش بدیم. شما میتونین خودتون کد CSS هم قرار بدین و به این کدها استایل بدین. در نهایت با استفاده از کد زیر Window را به Marker متصل کردیم:

infowindow.open(map,marker);

همونطور که دیدید با استفاده از open، باکس infoWindow ساخته شده رو به نشانه موجود بر روی نقشه نسبت دادیم. چون که این کار رو انجام دادیم و اون نشانه خودش مختصات داره، دیگه لازم نیس که برای Window خودمون از ویژگی position استفاده کنیم.

در جلسات بعدی بیشتر در مورد این ابزار قدرتمند گوگل صحبت میکنیم.

امیدوارم از این جلسه خوشتون اومده باشه.

موفق باشید

یا علی

Source

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

جلسات دوره

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.