تخفیف ویژه

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

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

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

google-maps

در جلسات قبلی بصورت کلی جزئیات نقشه گوگل رو بهتون آموزش دادیم و شما رو با تمامی موارد اون آشنا کردیم و اگر همه آموزشها رو دیده باشید، میتونین نقشه مورد نظر خودتون رو بسازید و در سایتتون قرار بدین تا کاربران از اون استفاده کنن. علاوه بر مواردی که در جلسات قبل بیان شد، شما میتونین از امکانات پیشرفته ای که Google maps در اختیارتون قرار میده استفاده کنید. این امکانات قابلیت‌های زیادی به نقشتون اضافه میکنه که بعضا رایگان نیستن و برای استفاده از اونا باید اونا رو بخرید و به نقشتون اضافه کنید. در اینجا امکانات مختلفی که وجود داره رو معرفی میکنیم و برای هر کدام مثالی میزنیم. در انتها هم نحوه خرید و فعالسازی از اونا رو بهتون توضیح میدیم.

نمونه 1 : ساخت نوع پیشرفته برای نقشه

همونطور که در جلسات قبلی دیدید 4 نوع اصلی و پیش فرض برای نوع یا type نقشه وجود داشت که عبارت بودند از ROADMAP و SATELLITE و HYBRID و TERRAIN.

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

<!DOCTYPE html>
<html>
  <head>
    <title>Complex styled maps</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <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 usRoadMapType = new google.maps.StyledMapType([
            {
              featureType: 'road.highway',
              elementType: 'geometry',
              stylers: [
                {hue: '#ff0022'},
                {saturation: 60},
                {lightness: -20}
              ]
            }, {
              featureType: 'road.arterial',
              elementType: 'all',
              stylers: [
                {hue: '#2200ff'},
                {lightness: -40},
                {visibility: 'simplified'},
                {saturation: 30}
              ]
            }, {
              featureType: 'road.local',
              elementType: 'all',
              stylers: [
                {hue: '#f6ff00'},
                {saturation: 50},
                {gamma: 0.7},
                {visibility: 'simplified'}
              ]
            }, {
              featureType: 'water',
              elementType: 'geometry',
              stylers: [
                {saturation: 40},
                {lightness: 40}
              ]
            }, {
              featureType: 'road.highway',
              elementType: 'labels',
              stylers: [
                {visibility: 'on'},
                {saturation: 98}
              ]
            }, {
              featureType: 'administrative.locality',
              elementType: 'labels',
              stylers: [
                {hue: '#0022ff'},
                {saturation: 50},
                {lightness: -10},
                {gamma: 0.90}
              ]
            }, {
              featureType: 'transit.line',
              elementType: 'geometry',
              stylers: [
                {hue: '#ff0000'},
                {visibility: 'on'},
                {lightness: -70}
              ]
            }
          ], {name: 'US Road Atlas'});

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 12,
          center: {lat: 41.85, lng: -87.65},
          mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'usroadatlas']
          }
        });

        map.mapTypes.set('usroadatlas', usRoadMapType);
        map.setMapTypeId('usroadatlas');
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?callback=initMap">
    </script>
  </body>
</html>

خروجی بصورت زیر هست:google maps create new type

همونطور که دیدید یک نوع جدید بنام US Road Atlas ساختیم و با استفاده از اون خیابانها و ... رو تغییر استایل دادیم.

نمونه 2 : نمایش موقعیت مورد نظر با وارد کردن نام اون موقعیت

در این نمونه یک باکس ورودی قرار داده شده که میتونین با استفاده از اون نام منطقه مورد نظرتون رو وارد کرده و با زدن بر روی دکمه مورد نظر، اون نقطه در صورت وجود به شما نمایش داده میشه. کد این مورد بصورت زیر است:

<!DOCTYPE html>
<html>
  <head>
    <title>Geocoding service</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        width: 580px;
        height: 400px;
      }
      #floating-panel {
        position: absolute;
        top: 10px;
        left: 10%;
        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">
      <input id="address" type="textbox" value="Sydney, NSW">
      <input id="submit" type="button" value="Geocode">
    </div>
    <div id="map"></div>
    <script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: {lat: -34.397, lng: 150.644}
        });
        var geocoder = new google.maps.Geocoder();

        document.getElementById('submit').addEventListener('click', function() {
          geocodeAddress(geocoder, map);
        });
      }

      function geocodeAddress(geocoder, resultsMap) {
        var address = document.getElementById('address').value;
        geocoder.geocode({'address': address}, function(results, status) {
          if (status === google.maps.GeocoderStatus.OK) {
            resultsMap.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
              map: resultsMap,
              position: results[0].geometry.location
            });
          } else {
            alert('Geocode was not successful for the following reason: ' + status);
          }
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?callback=initMap">
    </script>
  </body>
</html>

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

همونطور که دیدید درون ورودی مورد نظر عبارت شیراز رو وارد کردم و بر روی دکمه Geocode کلیک کردم. با این کار شیراز به من نمایش داده میشه.

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

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

موفق باشید

یا علی

Source

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

جلسات دوره

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

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

نیاز به لاگین

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