نقشه گوگل یکی از بهترین خدماتی است که شما می توانید از گوگل دریافت کنید. این یک ابزار رایگان است که به شما اجازه می دهد تا به راحتی نقشه تعاملی و اطلاعاتی را بر روی سایت خود قرار دهید. با این وجود نقطه ضعف استفاده از خدمات رایگان این است که در نهایت همه آنها به یک شکل هستند.
اما گوگل اخیرا یک برنامه ارائه داده است که با استفاده از آن می توانید استایل نقشه خود را کنترل کنید. نام این برنامه API است.در این پست به شما آموزش می دهیم که چگونه با استفاده از API نقشه سایت خود را خاص کنید.در این مقاله طراحی سایت می خواهیم تا نحوه قرار دادن نقشه گوگل در سایت و شخصی سازی آن را شرح دهیم.
اولین کاری که باید انجام دهید قرار دادن کتابخانه نقشه های گوگل جاوا اسکریپت (Google Maps JavaScript library) در داخل تگ <head> است. حال شما می توانید از API استفاده کنید.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
اجزای نقشه گوگل:
سه مولفه برای ساخت سبک نقشه های گوگل وجود دارد: علائم خصوصیات (feautureTypes)، علائم اجزا (elementTypes ) و Sytlers.
• حروف خصوصیات (featureTypes) برای انتخاب مقصد جغرافیایی بر روی نقشه، مانند جاده، آب، و پارک ها استفاده می شود، بنابراین دقیقا شبیه به سلکتورهای CSS عمل می کند.
• علائم عناصر (elementTypes) برای هدف قرار دادن عناصر که بخشی از مقصد جغرافیایی هستند مانند شکل مقصد و برچسب آن استفاده می شود.
• styler ها آرایه هایی برای تنظیم رنگ مقصد و نمایش آن است. نقشه گوگل با HSL (رنگ، اشباع، روشنایی) و هگزادسیمال برای فرمت رنگ همخوانی دارد.
طریقه استفاده عمومی
اول از همه، باید یک تگ <div> حاوی id نقشه مشخص شده بنویسیم.
<div id="surabaya"></div>
سبک ها در نقشه های گوگل با اهداف جاوا اسکریپت اعلان شده اند. بنابراین، تمام سبک ها تحت تگ <script> تو در تو هستند. علاوه بر این، شما می توانید تگ اسکریپت را قبل از بستن بادی قرار دهید، و یا در تگ head با ساختار window.onload بگذارید.
window.onload = function () {
// add the scripts here
}
یک variable برای در برگرفتن قوانین سبک نقشه ایجاد کنید. در این مقاله طراحی سایت ما نام این variable را styles گذاشته ایم.
window.onload = function () {
var styles = [
// we will add the style rules here.
];
};
سپس، نقشه را داخل تگ <div>به صورت زیر بیان کنید.
window.onload = function () {
var styles = [
// we will add the style rules here.
];
var options = {
mapTypeControlOptions: {
mapTypeIds: ['Styled']
},
center: new google.maps.LatLng(-7.245217594087794, 112.74455556869509),
zoom: 16,
disableDefaultUI: true,
mapTypeId: 'Styled'
};
var div = document.getElementById('surabaya');
var map = new google.maps.Map(div, options);
var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
map.mapTypes.set('Styled', styledMapType);
};
در این نقطه، نقشه در صفحه سایت شما ظاهر می شود. حال می توانید ظاهر نقشه خود را تغییر دهید. در اینجا مثال هایی برای اعمال تغییرات برای شما آورده ایم.
برای تغییر رنگ آب ها در نقشه باید دستور زیر را در variable styles وارد کنید.
var styles = [
{
featureType: 'water',
elementType: 'geometry.fill',
stylers: [
{ color: '#adc9b8' }
]
}
];
کد های بالا رنگ عناصر آب را بر روی نقشه به رنگ # adc9b8 تغییر می دهد. این تغییر رنگ را می توانید برای تمام عناصر موجود در نقشه انجام دهید. نوع رنگ دهی می تواند در فرمت های مختلف HSL و هگزادسیمال باشد. در زیر چند نمونه کد تغییر رنگ برای سایر عناصر نقشه را برای راحتی شما نوشته ایم.
{
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 }
]
}
این تغییرات به کلی ظاهر نقشه گوگل شما را تغییر می دهند و آنرا منحصر به فرد می کنند. علاوه بر کد نویسی شما می توانید با استفاده از لینک زیر بدون نیاز به برنامه نویسی رنگ عناصر سایت خود را فقط با وارد کردن رنگ تغییر دهید.
• Google Maps Colorizr