تخفیف ویژه

آموزش استفاده از نقشه گوگل در صفحات وب - Google Maps (جلسه 18) - رویدادها در Google maps

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

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

google-maps

در جلسه قبل در مورد گرفتن API Key برای نقشه گوگل صحبت کردیم و نقشه رو بر روی سایت آنلاین قرار دادیم.

Google maps امکاناتی رو برای شما به وجود میاره که میشه بواسطه اونا، نقشه با کارهایی که کاربران انجام میدن واکنش نشون بده. مثلا اگر بر نقطه ای کلیک بشه و یا رویداد دیگه ای بوقوع بپیونده، کار خاصی انجام میشه. مثلا با کلیک بر روی نقطه ای خاص، پیامی نمایش داده میشه و ...

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

اضافه کردن یک Event Listener

شما میتونین با استفاده از متد addListener() یک Event Listener به نقشه خودتون اضافه کنید. این متد سه ورودی رو قبول میکنه که اولین اونا همون المنتی هست که میخایم برای اون رویدادی رو مشخص کنید. بعد از اون نوع رویداد رو قرار میدیم. در آخر هم کدهایی که قصد داریم در زمان اتفاق رویداد اجرا بشن رو قرار میدیم. کد زیر رو در نظر بگیرید:

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "http://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){
         
            var mapProp = {
               center: myCenter,
               zoom:5,
               mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var marker = new google.maps.Marker({
               position: myCenter,
               title:'Click to zoom'
            });
            
            marker.setMap(map);
            
            google.maps.event.addListener(marker,'click',function() {
               map.setZoom(9);
               map.setCenter(marker.getPosition());
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

میبینید که یک متغیر بنام myCenter تعریف کردیم و مختصات نقطه خاصی رو برای اون قرار دادیم. حالا ار این مختصات هم برای map و هم برای marker استفاده میکنیم و موقعیت‌های اونا رو مشخص میکنیم. با استفاده از متد setMap هم این نشانه رو به نقشه متصل کردیم. حالا میخایم کاری کنیم که با کلیک بر روی نشانه مورد نظر، بزرگنمایی نقشه 7 برابر بشه. برای اینکار باید یک Event Listener اضافه کنیم. بصورت زیر:

google.maps.event.addListener(marker,'click',function() {
   map.setZoom(7);
   map.setCenter(marker.getPosition());
});

میبینید که ورودی اول رو همون marker قرار دادیم و نوع رویداد هم برابر با click قرار دادیم. یعنی هر موقع بر روی marker مورد نظر کلیک بشه، تابع مورد نظر اجرا میشه. در ابتدا با استفاده از متد setZoom بزرگنمایی نقشه رو برابر با 7 قرار میدیم و با استفاده از setCenter هم موقعیت مرکز نقشه رو برابر با موقعیت marker قرار میدیم. خروجی بصورت زیر خواهد بود:event listener zoom google maps

حالا فرض کنید میخایم زمانی که بر روی نشانه مورد نظر کلیک شد، یک Info Window برای اون باز بشه و متنی رو نمایش بده. برای اینکار بصورت زیر عمل میکنیم:

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "http://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){
			
            var mapProp = {
               center:myCenter,
               zoom:4,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var marker = new google.maps.Marker({
               position:myCenter,
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"Hi"
            });
            
            google.maps.event.addListener(marker, 'click', function() {
               infowindow.open(map,marker);
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

میبینید که یک info window ساختیم و گفتیم که زمانی که بر روی marker مورد نظر کلیک شد، info window مورد نظر بر روی marker نمایش داده بشه. خروجی بصورت زیر هست:show info window google maps

همونطور که دیدید با کلیک بر روی marker یک پیام محتوی متن Hi نمایش داده میشه.

در نهایت برای پاک کردن یک رویداد از یک المنت از متد removeListener() و بصورت زیر عمل میکنیم:

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "http://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){
			
            var mapProp = {
               center:myCenter,
               zoom:4,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var marker = new google.maps.Marker({
               position:myCenter,
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"Hi"
            });
            
            var myListener = google.maps.event.addListener(marker, 'click', function() {
               infowindow.open(map,marker);
            });
				
            google.maps.event.removeListener(myListener);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

میبینید که در ابتدا یک رویداد برای marker تعریف کردیم و در انتها از متد removeListener() استفاده کردیم. در خروجی خواهید دید که با کلیک بر روی نشانه هیچ اتفاقی نمیوفته.

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

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

موفق باشید

یا علی

Source

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

جلسات دوره

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

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

نیاز به لاگین

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