تغییر چهره نقشه های گوگل به کمک جاوااسکریپت

رضا باقرزاده - شنبه ۱8 خرداد ۱۳۹۲ - 14:11

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

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

اگر دوست دارید با یک مثال ساده جاوااسکریپت با نحوه استفاده از این API آشنا شوید، ادامه مطلب را از دست ندهید.

افزودن کتابخانه جاوااسکریپت گوگل مپز

لازم به توضیح نیست که اولین گام برای استفاده از این امکان، افزودن فایل جاوااسکریپت مربوطه داخل تگ head صفحه است.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

اجزای API

برای تغییر چهره نقشه های گوگل از سه کامپوننت feautureTypes، elementTypes و Sytlers استفاده می کنیم.

feautureTypes مانند انتخابگر های سی اس اس عمل می کند. به عنوان مثال می توانیم جاده ها، رودخانه ها، پس زمینه و ... را برای تغییر چهره انتخاب کنیم. برای مشاهده لیست کامل feautureType ها می توانید به این آدرس مراجعه کنید.

پس از انتخاب feautureType مورد نظر، باید انتخاب کنیم کدام قسمت آن را (رنگ داخل، خط حاشیه، اسامی) می خواهیم تغییر دهیم. این تنظیمات را می توانیم با کمک elementTypes انجام دهیم.

در نهایت با استفاده از Sytlers که آرایه ای حاوی تنظیمات است، ظاهر قسمت مورد نظر را تغییر می دهیم. برای تغییر رنگ می توانیم از سیستم HSL یا RGB استفاده کنیم.

برای شروع به محلی به منظور نمایش نقشه نیاز داریم که ما از یک تگ div کمک گرفته ایم.

<div id="map"></div>

برای نمایش نقشه در تگ مورد نظر از دستورات جاوااسکریپت زیر استفاده می کنیم.

window.onload = function () {
	var styles = [
		// تنظیمات در این قسمت قرار خواهد گرفت
	];
	var options = {
	mapTypeControlOptions: {
		mapTypeIds: ['Styled']
	},
		center: new google.maps.LatLng(-7.245217594087794, 112.74455556869509),
		zoom: 16,
		disableDefaultUI: true,	
		mapTypeId: 'Styled'
	};
	var div = document.getElementById('map');
	var map = new google.maps.Map(div, options);
	var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
	map.mapTypes.set('Styled', styledMapType);
};

تا این لحظه، نقشه با ظاهر اصلی خود نمایش داده خواهد شد.

در مثال زیر می خواهیم رنگ رودخانه ها (آب ها) را تغییر دهیم. خروجی آن را می توانید در تصویر مشاهده کنید.

var styles = [
	{
		featureType: 'water',
		elementType: 'geometry.fill',
		stylers: [
			{ color: '#adc9b8' }
		]
	}
];

کدهای زیر علاوه بر تغییر رنگ آب ها، رنگ پس زمینه (زمین) را نیز تغییر می دهد.

var styles = [
	{
		featureType: 'water',
		elementType: 'geometry.fill',
		stylers: [
			{ color: '#adc9b8' }
		]
	},{
		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 }
	]
}

دموی کدهای فوق را می توانید از این آدرس دریافت کنید. اگر حوصله کدنویسی ندارید، می توانید از این یا این ابزار آنلاین که برای همین کار طراحی شده اند استفاده کنید.

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

hongkiat