قرار دادن نقشه گوگل در سایت و شخصی سازی آن

10 / 10
از 1 کاربر

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

قرار دادن نقشه گوگل در سایت و شخصی سازی آن

اما گوگل اخیرا یک برنامه ارائه داده است که با استفاده از آن می توانید استایل نقشه خود را کنترل کنید. نام این برنامه 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

ارسال نظر و نظرات ثبت شده
Arman :
0 0
سلام ... تشكر از آموزش خوبتون چطوري ميتونم روي نقشه گوگل وضعيت آب و هوا روهم نشون بدم ؟
آموزش طراحی سایت
مقاله هدف از طراحی سایت
مقاله فرآیند هایی که وب سایت می بایست از آنها حمایت کند
مقاله مخاطبین وب سایت
مقاله مینیمالیسم اصل اساسی در طراحی وب سایت
مقاله اصولی که باید در طراحی وب رعایت کرد
مقاله مقدمه آموزش طراحی سایت
مقاله آموزش html در کنار آموزش طراحی سایت
مقاله آموزش css در کنار آموزش طراحی سایت
مقاله آموزش سئو در کنار آموزش طراحی سایت
مقاله نکاتی راجع به طراحی فروشگاه اینترنتی
مقاله بهینه سازی حجم صفحات وب و تاثیر آن بر طراحی سایت
مقاله اصول استفاده از رنگها در طراحی سایت
مقاله فرمت های گرافیکی در طراحی سایت
مقاله اشتباهات رایج در طراحی سایت
مقاله المانهای آزار دهنده در طراحی وب سایت
مقاله ویژگی های یک وب سایت موفق
مقاله نحوه تعمیر و نگهداری سایت
مقاله روش پیدا کردن اولین مشتری در طراحی سایت
مقاله تفاوت http با https در امنيت اطلاعات
مقاله هفت دلیل برای موفقیت وب سایت
مقاله روش هایی برای جذب بازدیدکننده وب سایت
مقاله فایرباگ چیست و کارکردن با آن چگونه می باشد؟
مقاله مزایا و معایب طراحی سایت های داینامیک
مقاله می خواهم طراح وب شوم
مقاله بازاریابی از طریق موتورهای جستجو
مقاله ریشه همه مشکلات رمز عبور:بگو نه به کلمات عبور به اشتراک گذاشته شده
مقاله چگونه در دنیای دیجیتال ارتباط خود را با مشتری مدیریت کنیم
مقاله معرفی کامل رشته فناوری اطلاعات
مقاله چگونه اقدام به برنامه ریزی استراتژیک کنیم
مقاله فناوری اطلاعات و موارد استفاده آن در مدیریت کسب و کار
مقاله طراحی یک چشم انداز عملی برای زندگی شما
مقاله وب سایت خود را به SSL مجهز کنید
مقاله هوشمندی تجاری چیست
مقاله مدیران پروژه موفق چه ویژگی هایی دارند
مقاله معرفی کامل دیسک های Blu-ray
مقاله هفت نکته کلیدی برای موفقیت در بازاریابی جهانی
مقاله نکات بازاریابی اینترنتی و بازاریابی ایمیل
مقاله اهمیت شبکه های اجتماعی در بازاریابی اینترنتی
مقاله Bounce Rate چیست و چگونه عمل می کند
مقاله مزایا و معایب سایت های فلش
مقاله اینفوگرافیک در طراحی سایت
مقاله W3C چیست ؟
مقاله تجارت و کسب و کارهای اینترنتی
مقاله انواع طراحی سایت بر اساس رابط کاربری وب
مقاله دلایل عدم مطالعه محتوای وب سایت
مقاله تفاوت طراحی وب سایت و توسعه وب سایت
مقاله معماری در طراحی سایت و افزایش سود دهی
مقاله طراحی سایت روان یا Liquid Design
مقاله هفت روش دریافت نظر و کامنت در پست های وب سایت
مقاله مزایا و معایب پست مهمان در طراحی سایت
مقاله آموزش ساخت شناسه ایرنیک
مقاله آموزش تنظیم رابطه های مجاز دامنه در ایرنیک
مقاله چند نکته انکار ناپذیر در طراحی سایت
مقاله نکاتی در طراحی سایت های دو زبانه
مقاله نکات مهم برای جذب بازدید کننده
مقاله طراحی سایت واکنش گرا
مقاله اشتباهاتی که نباید در طراحی وب سایت مرتکب شد
مقاله نحوه افزایش سرعت ایندکس مطالب جدید سایت
مقاله علل عدم موفقیت وب سایت
مقاله CMS و مزایای استفاده از آن
مقاله اهمیت صفحه ی اصلی سایت در ترافیک وب سایت
مقاله چگونه یک وب سایت موفق داشته باشیم؟
مقاله چرا باید سایت داشته باشیم؟
مقاله چگونگی بیان درخواست به طراح سایت
مقاله چند نکته ساده که هر طراح وب باید بداند!
مقاله نکات طراحی سایت در سال 2014
مقاله اهمیت گالری تصاویر در وب سایت
مقاله جیمیل به شما پیشنهاد توقف دریافت ایمیلهای اسپم را می دهد
مقاله معرفی سرویس OptinMonster (کاربران را در سایت خود نگاه دارید)
مقاله چطور یک کامنت عادی برای من 650 دلار سودآوری کرد؟
مقاله برای مدیریت حرفه ای یک وبسایت به چه نیازمندید؟
مقاله گوگل درصدد ساختن آینده ای با دختران کدنویس است
مقاله معیارهای انتخاب طراح سایت
مقاله Hero header در طراحی سایت
مقاله استفاده از فضای منفی در طراحی سایت
مقاله اصول طراحی سایت برای نوجوان
مقاله طراحی سایت با دکمه های نامرئی
مقاله اینفوگرافیک چیست؟
مقاله تکنیک های طراحی سایت Infinite Scrolling
مقاله روند طراحی سایت در 2015 چگونه خواهد بود؟
مقاله بهترین ابزارهایی که برای طراحی سایت میتواند از آن ها استفاده کرد
مقاله نکات امنیتی که در طراحی سایت باید رعایت شوند
مقاله تکنیک آپلود کردن تصاویر به صورت فونت در طراحی سایت
مقاله طراحی سایت با فرمت فلش
مقاله طراحی سایت برای موبایل
مقاله روش های مختلف طراحی سایت
مقاله مقایسه سرعت اجرایی php با asp.net
مقاله مشتری جهنمی
مقاله طراحی سایت با RUP
مقاله طراحی سایت با روش پارالاکس
مقاله تاریخچه طراحی سایت (اینفوگرافیک)
مقاله با 6 قدم در گوگل سایتز سایت خود را به صورت رایگان بسازید
مقاله تفاوت بین توسعه دهندگان وب و طراحان سایت
مقاله کارت ویزیت طراح سایت
مقاله بیماری هایی که ممکن است یک طراح سایت به آن ها مبتلا شود.
مقاله نرم افزار موبایل یا سایت ریسپانسیو، کدام بهتر است؟
مقاله آموزش طراحی سایت ریسپانسیو و واکنشگرا
مقاله متا تگ viewport و استفاده از آن در طراحی سایت ریسپانسیو
مقاله مدیا کوئری و استفاده از آن در طراحی سایت ریسپانسیو
مقاله گوگل و طراحی متریال
مقاله چه مواردی در طراحی سایت برای کاربر آزار دهنده است؟
مقاله طراحی سایت کاربر پسند و کاربردی
مقاله ساخت Favicon
مقاله بهترین روش یادگیری طراحی سایت
مقاله چگونه یک طراح وب و یا شرکت طراحی استخدام کنیم؟
مقاله 20 گام برای پیاده سازی یک وب سایت عالی
مقاله بهترین دوره های آنلاین طراحی سایت
مقاله استفاده از تجربه بازی های رایانه ای در طراحی وب سایت
مقاله رفع مجازات گوگل
مقاله بهترین نوع فایل تصویر برای استفاده در وب سایت چیست؟
مقاله قرار دادن نقشه گوگل در سایت و شخصی سازی آن
مقاله نام و کد هگزا دسیمال رنگ ها برای استفاده در برنامه نویسی وب سایت
مقاله 10 اشتباه مهلک در طراحی سایت
مقاله کاربرد css در طراحی سایت
مقاله عوامل موثر در کیفیت طراحی سایت
مقاله ترکیب html و css در طراحی سایت
مقاله شغل های همگام با طراحی سایت
مقاله تفاوت وب سایت و وب پورتال
مقاله معایب پارالاکس در طراحی سایت
مقاله طراحی سایت اپن کارت
مقاله تم کلی طراحی سایت در سال 2016-2017 : تمایز
مقاله روند بد منظر در طراحی سایت 2016
مقاله طراحی سایت فروشگاهی بر پایه پرستاشاپ
مقاله ایجاد افکت سه بعدی در طراحی سایت
مقاله مقایسه طراحی سایت اپن کارت و پرستاشاپ
مقاله XSLT در طراحی سایت
مقاله نکاتی برای شروع طراحی سایت
مقاله راه های ایندکس کردن صفحات وب سایت توسط گوگل
مقاله چه عواملی به طراحی سایت اعتبار می بخشد؟
مقاله کیدل : موتور جستجو مناسب برای کودکان
مقاله 20 فونت برتر برای استفاده در طراحی سایت
مقاله مثال هایی از طراحی سایت آزار دهنده
مقاله 7 قانون در طراحی سایت موثر
مقاله 5 ابزار طراحی سایت جدید در سال 2016
مقاله عوامل تعیین کننده هزینه طراحی سایت
مقاله در شرکت طراحی سایت مبنا از چه تکنولوژی هایی برای طراحی سایت استفاده می شود؟
مقاله ابزار AMP چیست؟
مقاله نکاتی برای تبدیل شدن به یک استاد طراحی سایت
مقاله ساخت و طراحی سایت در گوگل
مقاله صفر تا صد طراحی سایت
مقاله طراحی سایت وردپرس
مقاله طراحی سایت تک صفحه ای
مقاله نرم افزار طراحی سایت
مقاله طراحی سایت فلت
مقاله هنگام طراحی سایت جدید از چهار اشتباه ساده طراحی سایت اجتناب کنید
مقاله معرفی کتاب طراحی سایت واکنش گرا و تطبیقی
مقاله علائم نیاز به طراحی سایت جدید
مقاله نکاتی مفید برای طراحی سایت جدید
مقاله تفاوت UX و UI در طراحی سایت
مقاله آنچه که باید در طراحی سایت بدانید
مقاله به منظور افزایش امنیت طراحی سایت چه باید کرد
مقاله تاثیر بلاگ در طراحی سایت
مقاله چگونه هزینه طراحی سایت را کاهش دهیم
مقاله نقش ویدئو در طراحی سایت
مقاله اصول طراحی صفحه بندی سایت
مقاله الگوریتم Rank Brain
مقاله طراحی سایت مستقل
مقاله مقایسه طراحی تخت و متریال دیزاین در طراحی سایت
مقاله روند طراحی سایت در سال 2017
مقاله 5 روش جدید در طراحی سایت در سال 2017
مقاله نکات روانشناسی ساده در طراحی سایت
مقاله اینفوگرافیک طراحی سایت رسپانسیو چیست
مقاله مقایسه فریم ورک بوت استرپ با متریال دیزاین
مقاله طراحی سایت بر مبنای احساسات
مقاله طراحی سایت سئو محور
مقاله فضای منفی در طراحی سایت
مقاله باید ها و نباید ها در طراحی سایت
مقاله درطراحی سایت از رنگ سبز طبیعی استفاده کنید
مقاله طراحی فروشگاه اینترنتی مناسب چه افرادی است؟
مقاله تاثیر طراحی فروشگاه اینترنتی در کسب در آمد
مقاله طراحی فروشگاه اینترنتی اختصاصی