تخفیف ویژه

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

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

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

google-maps

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

نمونه 7 : نمایش لایه تردد دوچرخه یا bicycle

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

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Bicycling 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: 14,
          center: {lat: 42.3726399, lng: -71.1096528}
        });

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

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

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

نمونه 8 : مسیریابی ساده یا Simple Direction

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

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Directions service</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        width: 580px;
        height: 400px;
      }
      #floating-panel {
        position: absolute;
        top: 10px;
        left: 12%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }
    </style>
  </head>
  <body>
    <div id="floating-panel">
    <b>Start: </b>
    <select id="start">
      <option value="chicago, il">Chicago</option>
      <option value="st louis, mo">St Louis</option>
      <option value="joplin, mo">Joplin, MO</option>
      <option value="oklahoma city, ok">Oklahoma City</option>
      <option value="amarillo, tx">Amarillo</option>
      <option value="gallup, nm">Gallup, NM</option>
      <option value="flagstaff, az">Flagstaff, AZ</option>
      <option value="winona, az">Winona</option>
      <option value="kingman, az">Kingman</option>
      <option value="barstow, ca">Barstow</option>
      <option value="san bernardino, ca">San Bernardino</option>
      <option value="los angeles, ca">Los Angeles</option>
    </select>
    <b>End: </b>
    <select id="end">
      <option value="chicago, il">Chicago</option>
      <option value="st louis, mo">St Louis</option>
      <option value="joplin, mo">Joplin, MO</option>
      <option value="oklahoma city, ok">Oklahoma City</option>
      <option value="amarillo, tx">Amarillo</option>
      <option value="gallup, nm">Gallup, NM</option>
      <option value="flagstaff, az">Flagstaff, AZ</option>
      <option value="winona, az">Winona</option>
      <option value="kingman, az">Kingman</option>
      <option value="barstow, ca">Barstow</option>
      <option value="san bernardino, ca">San Bernardino</option>
      <option value="los angeles, ca">Los Angeles</option>
    </select>
    </div>
    <div id="map"></div>
    <script>
      function initMap() {
        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer;
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 7,
          center: {lat: 41.85, lng: -87.65}
        });
        directionsDisplay.setMap(map);

        var onChangeHandler = function() {
          calculateAndDisplayRoute(directionsService, directionsDisplay);
        };
        document.getElementById('start').addEventListener('change', onChangeHandler);
        document.getElementById('end').addEventListener('change', onChangeHandler);
      }

      function calculateAndDisplayRoute(directionsService, directionsDisplay) {
        directionsService.route({
          origin: document.getElementById('start').value,
          destination: document.getElementById('end').value,
          travelMode: google.maps.TravelMode.DRIVING
        }, function(response, status) {
          if (status === google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?callback=initMap">
    </script>
  </body>
</html>

خروجی بصورت زیر هست:direction simple google maps

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

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

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

موفق باشید

یا علی

Source

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

جلسات دوره

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

محمد کاشانی

ادامه این دوره چی شد؟

وحید صالحی

چشم بزودی

نیاز به لاگین

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