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

‏ 7 دقیقه

۰۶ مرداد ۱۳۹۵

در این مطلب با ادامه آموزش 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>

خروجی بصورت زیر هست:

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

نمونه 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>

خروجی بصورت زیر هست:

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

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

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

موفق باشید

یا علی

Source