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

‏  4 دقیقه
۰۳ مرداد ۱۳۹۵

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

google-maps

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

نمونه 5 : نمایش لایه ترافیک یا Traffic

Google Maps امکانی رو در اختیار شما قرار میده که با استفاده از اون میتونین یک لایه یا  Layer به نقشتون اضافه کنید و اطلاعات ترافیکی خیابونها و جاده‌ها رو بر روی نقشه قرار بدین. به این ترتیب کاربران با نگاه به نقشه مورد نظر میفهمن که کدام خطوط دارای ترافیک و کدام خطوط بدون ترافیک هستن و بهتر و سریعتر میتونین راه خودشون رو پیدا کنن و به مقصد مورد نظر برسن. کد زیر رو در نظر بگیرید:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Traffic layer</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        width: 580px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 15,
          center: {lat: 34.04924594193164, lng: -118.24104309082031}
        });

        var trafficLayer = new google.maps.TrafficLayer();
        trafficLayer.setMap(map);
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?callback=initMap">
    </script>
  </body>
</html>

خروجی بصورت زیر هست:layer traffic google maps

همونطور که در کد و نقشه مورد نظر دیدید، خیابونها به دو رنگ سبز و قرمز در اومدن و هر چه قرمز اون شدیدتر باشه، نشان از اونه که اونجا ترافیک بیشتره و بعضی از نقاط هم دارای علامت ممنوع هست که منظورش اینه که اون مسیر ترافیک سنگینی داره یا مسدوده و بهتره از این مسیر عبور نکنید.

نمونه 6 : نمایش لایه ترانزیت یا Transit

Google Maps امکانی رو در اختیار شما قرار میده که با استفاده از اون میتونین یک لایه یا  Layer به نقشتون اضافه کنید و اطلاعات ترانزیتی جاده‌ها رو بر روی نقشه قرار بدین. به این ترتیب کاربران با نگاه به نقشه مورد نظر، اطلاعاتی در مورد ترانزیت و عبور و مرور اون بدست میارن و بهتر میتونین تصمیم گیری کنن. کد زیر رو در نظر بگیرید:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Transit layer</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        width: 580px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 13,
          center: {lat: 51.501904, lng: -0.115871}
        });

        var transitLayer = new google.maps.TransitLayer();
        transitLayer.setMap(map);
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?callback=initMap">
    </script>
  </body>
</html>

خروجی بصورت زیر هست:layer transit google maps

همونطور که دیدید جاده‌ها به رنگهای مختلفی در اومدن و لایه ترانزیت بر روی نقشه گوگل فعال شده و میتونین از مزایای اون بهره ببرید. اگر بخواید این نقشه رو با نقشه ساده مقایسه کنید، پس اون رو با تصویر زیر مقایسه کنید:layer no transit google maps

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

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

موفق باشید

یا علی

Source

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

جلسات دوره

نیاز به لاگین

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

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

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