تخفیف ویژه

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

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

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

google-maps

در این جلسه میخایم انواع نقشه هایی که گوگل از اونا پشتیبانی میکنه رو خدمتتون معرفی کنیم.

انواع نقشه برای Google Maps

گوگل از انواع زیر پشتیبانی میکنه:

  • ROADMAP : این مورد نوع پیش فرض هست. اگر هیچ نوعی برای نقشه مشخص نکنید، این مورد بصورت اتوماتیک فعال میشه. این مورد نمای خیابانها رو در مکانی که مشخص کردید، نمایش میده.
  • SATELLITE : اگه این نوع نقشه رو انتخاب کنید، نقشه خروجی شما بصورت تصاویر ماهواره ای نمایش داده میشه.
  • HYBRID : این نوع نقشه خیابانهای اصلی رو بر روی تصاویر ماهواره ای نمایش میده.
  • TERRAIN : با انتخاب این نوع نقشه، عوارض زمین و پوشش گیاهی در نقشه نمایش داده میشه.

برای انتخاب یکی از موارد بالا برای نوع نقشه، باید بصورت زیر عمل کنید:

var mapOptions = {
   mapTypeId:google.maps.MapTypeId.Id of the required map type
};

باید بجای Id of the required map type یکی از اون 4 مورد رو قرار بدیم تا نوع نمودار مشخص بشه.

حالا برای هر کدوم از موارد بالا یک مثال میزنیم تا بهتر موضوع رو بفهمید.

نوع اول : ROADMAP

<!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.609993, 83.221436),
               zoom:9,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
      
   </head>
   
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

خروجی این نمونه بصورت زیر هست:roadmap type google maps

نوع دوم : Satellite

<!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.609993, 83.221436),
                  zoom:9,
                  mapTypeId:google.maps.MapTypeId.SATELLITE
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
		
   </head>
      
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

خروجی این نمونه بصورت زیر هست:satellite type google maps

نوع سوم : Hybrid

<!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.609993, 83.221436),
            zoom: 9,
            mapTypeId: google.maps.MapTypeId.HYBRID
        };
        var map = new google.maps.Map(document.getElementById("sample"), mapOptions);
    }
    </script>
</head>

<body onload="loadMap()">
    <div id="sample" style="width:587px;height:400px;"></div>
</body>

</html>

خروجی این نمونه بصورت زیر هست:hybrid type google maps

نوع چهارم : Terrain

<!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.609993, 83.221436),
               zoom:9,
               mapTypeId:google.maps.MapTypeId.TERRAIN
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
      
   </head>
   
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

خروجی این نمونه بصورت زیر هست:terrain type google maps

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

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

موفق باشید

یا علی

Source

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

جلسات دوره

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

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

نیاز به لاگین

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