نحوه‌ی استایل‌دهی به گوگل‌مپ

نحوه‌ی استایل‌دهی به گوگل‌مپ
گوگل‌مپ یکی از بهترین امکاناتی است که گوگل در اختیار کاربرانش قرار می‌دهد. گوگل‌مپ ابزار رایگانی است که این امکان را به شما می‌دهد تا نقشه‌ای جذاب که کاربر میتونه با اون تعامل داشته باشه را در وب‌سایت خود قرار دهید و اطلاعات و آدرس دقیق خود را روی گوگل‌مپ ثبت کنید. با این‌وجود، گاهی وقت‌ها استفاده از ابزارهای رایگان باعث غیرجذاب بودن وب‌سایت میشه و دلیلش میتونه این باشه که همه‌ی نقشه ها شبیه هم هستند و برای وب‌سایت‌های مختلف تنظیم نمیشن.
آموزش برنامه نویسی موبایل
آموزش برنامه نویسی اندروید به همراه پشتیبانی رایگان برای رفع خطاهای شما
خودتان را اینجا معرفی کنید


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

کتابخانه‌ی گوگل‌مپ

اولین کاری که باید انجام بدیم اینه که فایل جاوااسکریپت کتابخانه‌ی گوگل‌مپ رو توی وب‌سایتمون اینکلود کنیم، حالا معمولا یا قبل از بسته شدن تگ head   و یا در فوتر وب‌سایت قرار می‌دهیم.
( اگر خواستید فایل جاوااسکریپت رو توی فایل‌های خودتون قرار دهید، لینک فایل رو متاسفانه بستن! می‌تونید یه جوری وصل بشید ;)   و یا همین کد زیر رو بذارید روی سرور وصل خواهد شد. )
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

 کامپوننت‌های(اجزاء، مولفه) گوگل‌مپ ( Google Maps Components )

برای استایل‌دهی به گوگل‌مپ 3 تا کامپوننت تعریف شده که به شرح زیر هستند :
  1. feautureTypes
  2. elementTypes
  3. Stylers
feautureTypes برای انتخاب اجزاء حغرافیایی روی نقشه‌ی گوگل استفاده می‌شوند از قبیل : جاده‌ها، دریا، مناظر و پارک ؛ و در واقع مانند سلکتورهای css برای تغییر استایل کاربرد دارند. برای راحتی کار شما ما چند مورد از feautureTypes  رو در اینجا ذکر می‌کنیم که برای استایل دهی به گوگل‌مپ نیاز داریم.


 
شما می‌تونید مرجع کامل APIهای مورداستفاده رو ببینید : feautureTypes گوگل‌مپ

elementTypes برای انتخاب بخش‌هایی از نقشه‌ی گوگل کاربرد دارد مانند ، شکل اجزاء، خط‌ها ، برچسب‌ها و...
Stylers یک آرایه از ویژگی‌ها و رنگ‌های مورد استفاده برای گوگل‌مپ می‌باشد. گوگل‌مپ رنگ‌ها رو به صورت HSL (Hue, Saturation, Lightness)  و یا هگزادسیمال قبول می‌کند.

شروع استایل‌دهی به گوگل‌مپ

در قدم اول شما یک <div>  تعریف کنید و یک id  به اون اختصاص بدید که گوگل‌مپ رو داخل اون قرار دهیم. 
<div class="wrapper">
  <div id="newMap"></div>       
</div>
 استایل‌دهی به گوگل‌مپ از طریق جاوااسکریپت انجام می‌شود پس شما یا در داخل تگ head و یا در انتهای صفحه به صورت زیر کدهای جاوااسکریپت خود را قرار دهید. لازمه که دقت کنیم در صورتیکه کدهای رو داخل تگ <script> درون تگ <head> قرار دادیم حتما از window.onload استفاده کنیم که بعد از لود کامل صفحه گوگل‌مپ فراخوانی بشه.
window.onload = function() {
  // add the script here
}
متغیری رو برای قراردادن دستورالعمل‌ها داخل اون می‌سازیم، هر اسمی رو دوست دارید می‌تونید برای  متغیرتون استفاده کنید و معمولا از اسم‌های مناسب سعی کنیم استفاده کنیم.
window.onload = function() {
   var mapStyle = [
      // we will add the style rules here
   ];
}
سپس، با استفاده از تابع زیر نقشه‌ی گوگل رو توی <div>ی که ایجاد کردیم نمایش می‌دهیم.
window.onload = function () {
    var mapStyle = [
        // we will add the style rules here.
    ];
    var options = {
    mapTypeControlOptions: {
        mapTypeIds: ['Styled']
    },
        center: new google.maps.LatLng(35.732766,51.389306),
        zoom: 16,
        disableDefaultUI: true,
        mapTypeId: 'Styled'
    };
    var div = document.getElementById('newMap');
    var map = new google.maps.Map(div, options);
    var styledMapType = new google.maps.StyledMapType(mapStyle, { name: 'Styled' });
    map.mapTypes.set('Styled', styledMapType);
};
که بعد از انجام این‌کارها باید تصویری به شکل زیر داشته باشیم :


البته یادتون باشه که باید استایلی بهش بدیم که درست نمایش داده بشه که من استایل زیر رو بهش دادم :
.wrapper {
  width   : 90vw;
  height : 70vh;
  margin : 0 auto;
}
header {
  text-align : center;
}
#newMap{
  width : 100%;
  height : 100%;
}
در این مثال من قصد دارم رنگ آب رو تغییر بدم و تغییراتی کلی ایجاد کنم. پس در داخل متغیری که ایجاد کردیم دستورات رو می‌نویسیم :
 var mapStyle = [
      {
        featureType: 'water',
        elementType: 'geometry.fill',
        stylers: [
            { color: '#2980b9' }
        ]
      }
    ];
که نتیجه‌ی تغییر به صورت زیر می‌باشد :
تغییر دیگری که می‌تونیم ایجاد کنیم تغییر رنگ چشم اندازهاست که با افزودن کد زیر تغییر رو انجام می‌دهیم :
{
        featureType: 'landscape.natural',
        elementType: 'all',
        stylers: [
            { hue: '#809f80' },
            { lightness: -35 }
        ]
}

که نتیجه‌ی تغییر به شکل زیر خواهد بود :

و به این سبک می‌تونیم سایر بخش‌ها رو با کدهای زیر تغییر دهیم.
 var mapStyle = [
        // we will add the style rules here.
 {
        featureType: 'water',
        elementType: 'geometry.fill',
        stylers: [
            { color: '#2980b9' }
        ]
      },{
        featureType: 'landscape.natural',
        elementType: 'all',
        stylers: [
            { hue: '#809f80' },
            { lightness: -35 }
        ]
      },
      {
          featureType: 'poi',
          elementType: 'geometry',
          stylers: [
              { hue: '#f9e0b7' },
              { lightness: 30 }
          ]
      },{
          featureType: 'road',
          elementType: 'geometry',
          stylers: [
              { hue: '#d5c18c' },
              { lightness: 14 }
          ]
      },{
          featureType: 'road.local',
          elementType: 'all',
          stylers: [
              { hue: '#ffd7a6' },
              { saturation: 100 },
              { lightness: -12 }
          ]
      }      
         
      ];
که تصویر نهایی به صورت زیر تغییر خواهد کرد :


 
و درنهایت میتونید فایل تمرین شده رو از طریق کدپن دریافت کنید :



امیدوارم لذت برده باشید wink

میکائیل اندیشه هستم، چند سالی میشه در حوزه Front-End کار میکنم و بیشتر علاقه ی من در زمینه برنامه نویسی JavaScript , jQuery و تکنولوژی های مرتبط هست و فعلا نیز در این حوزه مطالعه میکنم ... :)

نظرات و سوالات کاربران

ارسال پاسخ میکائیل
میکائیل
شنبه ۲۶ دی ۱۳۹۴ ۱۲:۰۲
در پاسخ به دیدگاه omid ارسال شده در شنبه ۲۱ آذر ۱۳۹۴ ۱۴:۵۴

عالی بود خیلی ممنون

خواهش میکنم ، خوشحالم مفید واقع شده دوست من :)
ارسال پاسخ omid
omid
شنبه ۲۱ آذر ۱۳۹۴ ۱۴:۵۴

عالی بود خیلی ممنون