ایجاد نقشه گوگل توسط کامپوننت وب و بدون کدنویسی

ایجاد نقشه گوگل توسط کامپوننت وب و بدون کدنویسی

Build Google Maps using web components & no code!

ایجاد نقشه گوگل توسط کامپوننت وب و بدون کدنویسی

» بررسی اجمالی (OverView)

به سری آموزش های CodeLabs گوگل خوش آمدید. در این مقاله قصد داریم یک نقشه گوگل (Google maps) کامل را بدون نیاز به کدنویسی و توسط وب کامپوننت های polymer گوگل آموزش دهیم. اپلیکیشن طراحی شده در این آموزش، ریسپانسیو (واکنش‌گرا) خواهد بود و جهت رانندگی در خیابان ها و همچنین مد ترانزیت را نیز خواهد داشت. در حین این آموزش، Polymer Data Binding و Iron Elements را نیز آموزش خواهیم داد.

 

آنچه که خواهید آموخت:

  • نحوه شروع ساخت یک پروژه Polymer-Based توسط Chrome Dev Editor
  • نحوه استفاده از المنت های پلیمر مانند iron و paper و مجموعه کامپوننت های وب.
  • نحوه استفاده از ویژگی Polymer’s Data Binding برای کاهش کد متنی.

 

آنچه که نیاز خواهید داشت:

  • آشنایی با مفاهیم اولیه HTML-CSS و توسعه وب (Web Development).
  • نصب Chrome Dev Editor یا استفاده از ویرایشگر دلخواه خود.

 

 

» شروع تنظیمات (Getting Setup)

 

ایجاد پروژه جدید:

ما در این مقاله از Chrome Dev Editor بعنوان IDE گوگل کروم برای توسعه اپلیکیشن استفاده خواهیم کرد. اگر هنوز این ویرایشگر را نصب نکرده اید، با کلیک روی لینک زیر، آنرا از Chrome Web Store دانلود و نصب کنید:

دانلود Chrome Dev Editor

 

اولین باری که ویرایشگر Chrome Dev را اجرا می کنید، از شما خواسته می شود که فضای کاری (Workspace Environment) را تنظیم کنید.

  • برای ایجاد پروژه جدید، روی آیکون plus sign کلیک کنید.
  • نام پروژه را "PolymerMapsCodelab" تعریف کنید.
  • در لیست بازشوی "project type" گزینه JavaScript web app (using Polymer paper elements) را انتخاب کنید.
  • روی دکمه create کلیک کنید.

شروع تنظیمات (Getting Setup)

ویرایشگر chrome dev یک چارچوب ابتدایی برای اپلیکیشن پلیمر شما ایجاد می کند. همچنین این ویرایشگر در پس زمینه، از Bower برای دانلود و نصب تمام dependency ها (شامل کتابخانه اصلی پلیمر: Polymer Core library) بهره می برد و در نهایت آنها را داخل فولدر "bower_components" می ریزد. فرآیند دانلود و نصب این کامپوننت ها بسته به سرعت اتصال اینترنت شما، ممکن است زمانبر باشد.

ساختار فولدر شما باید بصورت زیر باشد:

ساختار فولدر

 

پیش نمایش اپلیکیشن (App Preview):

فایل index.html را انتخاب کنید و دکمه run app را به منظور اجرای اپلیکیشن کلیک کنید. Chrome Dev Editor یک وب سرور راه اندازی می کند و صفحه index.html را به شما نمایش خواهد داد.

پیش نمایش اپلیکیشن (App Preview)

در این مرحله، اپلیکیشن هنوز کاری انجام نمی دهد!

استفاده از نقشه گوگل (Google-map)

» استفاده از نقشه گوگل (Google-map)

مجموعه کامپوننت های وب گوگل (Google Web Components) یک المان <google-map> تولید می کند که باعث render شدن نقشه گوگل خواهد شد. به منظور استفاده از آن، ابتدا باید آنرا توسط Bower نصب کنید.

 

Bower چیست؟

Bower یک ابزار مدیریت بسته سمت مشتری (Client-Side Package Manager Tool) است که می تواند توسط اپلیکیشن های وب مورد استفاده قرار بگیرد. وقتی با Polymer کار می کنید، bower فرآیند مدیریت dependency ها را تسهیل می کند. هر کامپوننت، مجموعه dependency های خاص خود را تعریف می کند. وقتی از bower برای نصب یک کامپوننت استفاده می کنید، تمام dependency های کامپوننت در فولدر bower_components نصب خواهند شد.

Bower چیست؟

نصب المان google-map:

متاسفانه Chrome Dev Editor خط فرمان (command line) ندارد برای اینکه بتوانید دستورات bower را در آن اجرا کنید. در عوض شما باید بطور دستی فایل bower.json را ویرایش کنید و google-map را درج کنید. سپس ویژگی Bower Update را در Chrome Dev Editor اجرا کنید. Bower Update تمام dependency ها را از فایل bower.json می خواند و آنهایی را که نصب نیستند را نصب می کند.

 

نحوه نصب dependency توسط خط فرمان یا command line:

اگر از ویرایشگر Chrome Dev استفاده نمی کنید یا اینکه می خواهید از command line برای اجرای دستورات استفاده کنید، دستور bower install GoogleWebComponents/google-map –save را در دایرکتوری اپلیکیشن خود اجرا کنید تا <google-map> نصب شود و آنرا بعنوان یک dependency ذخیره کند.

۱- فایل bower.json را ویرایش کنید و بصورت زیر، google-map را به dependency های پروژه اضافه کنید:

"dependencies": {

  "iron-elements": "PolymerElements/iron-elements#^1.0.0",

  "paper-elements": "PolymerElements/paper-elements#^1.0.1",

  "google-map": "GoogleWebComponents/google-map#^1.1.3"

}

 

۲- روی فایل bower.json راست کلیک کنید.

۳- گزینه Bower Update را مطابق تصویر زیر از منو انتخاب کنید.

Bower Update

دانلود فایل ها و کتابخانه ها ممکن است کمی زمانبر باشد. برای کسب اطمینان از درست نصب شدن dependency ها، مثلا google-map وارد فولدر bower_components/google-map/ شوید و آنرا بررسی کنید.

 

بدست آوردن API Key نقشه:

برای استفاده از المان نقشه گوگل، شما باید کلید API نقشه گوگول (Google Map API Key) را بدست آورید. به لینک https://developers.google.com/maps/documentation/javascript/get-api-key مراجعه کرده و API Key خود را کپی کنید. در قدم بعدی می خواهیم از آن استفاده کنیم.

 

استفاده از المان google-map:

به منظور بکارگیری <google-map> شما باید:

  • از HTML Import برای لود نقشه در صفحه index.html استفاده کنید.
  • نمونه ای از المان google-map را در صفحه تعریف کنید.

 

در صفحه index.html سایر import ها را از تگ head صفحه حذف کنید (در صورت وجود) و آنها را با یک import ساده فایل google-map.html جایگزین کنید:

<head>

    ….

    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>

    <link rel="import" href="bower_components/google-map/google-map.html">

    <link rel="stylesheet" href="styles.css">

</head>

نکته مهم: تمام import ها باید بعد از اعلان webcomponents-lite.min.js درج شوند تا polyfill بتواند بدرستی آنها را لود کند.

سپس محتوای body صفحه وب را با نمونه المان <google-map> (به شکل کد زیر) آپدیت کنید:

<body unresolved>

    <google-map latitude="37.779" longitude="-122.3892" zoom="13" api-key="YOUR_KEY"></google-map>

</body>

 همانطور که مشاهده می کنید، المان google-map کاملا خوانا می باشد. اتریبیوت های latitude و longitude برای تعیین مختصات جغرافیایی نقشه، اتریبیوت zoom برای میزان زوم نقشه و api-key نیز شامل کلید api نقشه می باشد.

نقشه گوگل

استایل دهی به نقشه گوگل:

اگر شما هم اکنون اپلیکیشن را اجرا کنید، هیچ چیزی نمایش نمی یابد. به منظور نمایش صحیح نقشه، باید ارتفاع (height) آنرا به صورت زیر تنظیم کنید:

body, html {

        font-family: 'Roboto', Arial, sans-serif;

        height: 100%;

        margin: 0;

    }

استایل های فوق را در فایل styles.css وارد کنید.

 

افزودن نشانگر نقشه (Marker):

<google-map> از قابلیت نشانگر نقشه (marker) پشتیبانی می کند بوسیله تعریف <google-map-marker> بعنوان المان فرزند google-map . موقعیت جغرافیایی marker نیز توسط اتریبیوت های longitude و latitude مشخص خواهد شد.

به صفحه index.html برگردیم. مطابق کد زیر، یک تگ <google-map-marker> به نقشه اضافه کنید:

<google-map latitude="37.779" longitude="-122.3892" api-key="YOUR_KEY" zoom="13" disable-default-ui>

    <google-map-marker latitude="37.779" longitude="-122.3892" title="Go Giants!" draggable="true"></google-map-marker>

</google-map>

*دقت کنید که ما در کد بالا، کنترل های نقشه (map’s controls) را توسط true کردن اتریبیوت disableDefaultUi غیرفعال کردیم. زیرا این اتریبیوت مقدار بولین (Boolean: true-false) می گیرد.

 

اجرای اپلیکیشن (Run the App):

اگر تا کنون برنامه را اجرا نکرده اید، روی آیکون run app کلیک کنید. شما در این مرحله شما باید یک نقشه گوگل تمام صفحه بهمراه یک نشانگر (marker) مشاهده کنید:

اجرای اپلیکیشن (Run the App)

» افزودن جهت رانندگی (Driving Direction):

المان <google-map-directions> بهمراه <google-map> نصب شده است. این تگ اطلاعات مربوط به جهت رانندگی در خیابان ها و بزرگراه ها را شامل می شود که از Google Maps API بهره می برد.

 

استفاده از المان google-map-directions:

به منظور بکارگیری المان <google-map-directions> در اپلیکیشن خود:

  • از قابلیت HTML import برای لود در صفحه index.html استفاده کنید.
  • یک نمونه (instance) از المان را در صفحه تعریف کنید.
  • آنرا به "نقشه" (map) متصل کنید.

 

در فایل index.html توسط import در <head> فایل google-map-directions.html را اضافه کنید. مطابق کد زیر:

<head>

    ….

    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>

    <link rel="import" href="bower_components/google-map/google-map.html">

    <link rel="import" href="bower_components/google-map/google-map-directions.html">

</head>

المان <google-map-directions> را باید بصورت همردیف با <google-map> تعریف کنیم. این المان دارای اتریبیوت های start-address و end-address می باشد. start-address را برابر San Fransisco و end-address را Mountain View تعریف کنید. به شکل دستورات زیر:

<body unresolved>

    <google-map latitude="37.779" longitude="-122.3892" api-key="YOUR_KEY" zoom="13" disable-default-ui>

        …

    </google-map>

    <google-map-directions start-address="San Francisco" end-address="Mountain View" api-key="YOUR_KEY"></google-map-directions>

</body>

 

برقراری ارتباط بین جهات رانندگی و نقشه:

المان <google-map-directions> جهات رانندگی را تولید می کند. اما این قضیه بخودی خود مفید نخواهد بود. شما باید <google-map-directions> را به نتایج حاصل از <google-map> متصل کنید تا جهات رانندگی در نقشه بدرستی نمایش یابد.

هر دو المان google-map و google-map-directions متدی بنام .map دارند که به کاربران اجازه دسترسی/تنظیم آبجکت نقشه را می دهد که توسط Google Maps JavaScript API مورد استفاده قرار می گیرد.

برای برقراری ارتباط بین این دو المان، باید آبجکت نقشه یکسانی را برای آنها تنظیم کنید.

در انتهای صفحه index.html المان directions را ست کنید:

<script>

  var gMap = document.querySelector('google-map');

  gMap.addEventListener('api-load', function(e) {

    document.querySelector('google-map-directions').map = this.map;

  });

</script>

</body>

نکته: برای کسب اطمینان از لود کامل نقشه، باید منتظر اجرای رویداد api-load نقشه بمانید.

 

نمایش نقشه گوگل بدون نیاز به کدنویسی!

همانطور که در عنوان مقاله آمده، هدف ما در این مقاله، پیاده سازی google map بدون کدنویسی است. اما در این بخش بیان کردیم که چطور می توان المان نقشه را توسط event و property های آن تنظیم کنیم. در مرحله بعدی، تمام این کدها را بدلیل ویژگی های data-binding پلیمر (polymer) حذف خواهیم کرد!

 

اجرای اپلیکیشن (Run the App):

اکنون می توانید با فشردن دکمه run app برنامه را اجرا کنید. در این مرحله، نقشه گوگل ایجاد شده باید شامل نشانگر (marker) و جهات رانندگی بین San Francisco و Mountain View باشد.

نمایش نقشه گوگل بدون نیاز به کدنویسی

 

» افزودن ورودی آدرس (Address input):

در این مرحله می خواهیم دو ورودی برای آدرس های مبدا و مقصد (start & end addresses) درج کنیم. پلیمر (Polymer) المان های مختلفی را برای کار کردن با ورودی های کاربران (inputs) فراهم کرده است مانند: paper-card و paper-item و paper-input و iron-icon و iron-icons .

در صفحه index.html دستورات import جدید را به شکل زیر درج کنید:

<head>

    ….

    <link rel="import" href="bower_components/iron-icon/iron-icon.html">

    <link rel="import" href="bower_components/iron-icons/iron-icons.html">

    <link rel="import" href="bower_components/paper-item/paper-item.html">

    <link rel="import" href="bower_components/paper-item/paper-icon-item.html">

    <link rel="import" href="bower_components/paper-input/paper-input.html">

    <link rel="import" href="bower_components/paper-card/paper-card.html">

</head>

 

در پایین صفحه، باید دو المان <paper-icon-item> تعریف شود بهمراه دو input متریال دیزاین به منظور آدرس های ابتدا و انتهای مسیر موردنظر کاربران. المان <paper-icon-item> برای طراحی یک آیتم با آیکون مناسب می باشد.

<paper-icon-item>

    <paper-input label="Start address" value="San Francisco"></paper-input>

</paper-icon-item>

<paper-icon-item>

    <paper-input label="End address" value="Mountain View"></paper-input>

</paper-icon-item>

 

افزودن آیکون جستجو:

<iron-icon> المانی است که برای نمایش آیکون ها مناسب است. این المان یک اتریبیوت icon دارد که مقدار آنرا می توان از مجموعه آیکونهای polymer تعیین کرد.

  • درون هر item یک <iron-icon> تعریف کنید.
  • اتریبیوت آیکون را بصورت icon="search" تعریف کنید.

 

<paper-icon-item>

    <iron-icon icon="search" item-icon></iron-icon>

    <paper-input label="Start address" value="San Francisco"></paper-input>

</paper-icon-item>

<paper-icon-item>

    <iron-icon icon="search" item-icon></iron-icon>

    <paper-input label="End address" value="Mountain View"></paper-input>

</paper-icon-item>

مهم: مطمئن شوید که اتریبیوت item-icon را برای هر یک از المان های <iron-icon> ها تعریف کنید. این اتریبیوت به <paper-icon-item> می گوید که کدامیک از المان های فرزند از آیکون استفاده می کند.

 

افزودن یک کارت متریال دیزاین:

باید بخش ورودی کاربران (inputs) را در یک کارت متریال دیزاین (Material-Design Card) تعریف کنیم. المان <paper-card> روشی مناسب برای هایلایت کردن این بخش از اپلیکیشن می باشد.

<paper-card elevation="2">

    <!– elevation controls the amount of box shadow –>

    <paper-icon-item>

        …

    </paper-icon-item>

    <paper-icon-item>

        …

    </paper-icon-item>

</paper-card>

در فایل styles.css استایل های پیش فرض را برای کارت تعریف کنیم. می خواهیم بخش input آدرس ها را در گوشه پایین سمت چپ اپلیکیشن نمایش دهیم.

فایل styles.css:

paper-card {

        position: absolute;

        bottom: 25px;

        left: 25px;

        z-index: 1;

    }

افزودن یک کارت متریال دیزاین

 

» اتصال داده جستجوی کاربر (User Search Data-Binding):

در مرحله قبل، ما ورودی جستجوی کاربر (User’s Search Input) را برای جهات رانندگی ایجاد کردیم. در این مرحله از مقاله، بیشتر با المان <google-map-directions> کار می کنیم.

 

استفاده از data-binding خارج از Polymer:

ویژگی اتصال داده پلیمر (Polymer’s Data-Binding Feature) زمانی در دسترس است که المان <dom-module> را ساخته باشیم. اگرچه پلیمر نسخه type-extension المان <template> را بنام <dob-bind> در اختیار توسعه دهندگان قرار داده است.

این قضیه امکاناتی را به اپلیکیشن شما اضافه می کند. مانند: استفاده از {{}} برای اتصال داده (Data-Binding) در صفحه اصلی اپلیکیشن.

Property هایی که در <template is="dom-bind"> تعریف می شوند می توانند به داده های موجود در اسکریپت نوشته شده متصل شوند. مانند کد زیر:

<template is="dom-bind" id="t">

    <!– Hello, Eric. How are you today? –>

    Hello,

    <span>{{name}}</span>.

    <span>{{greeting}}</span>

</template>

 

<script>

  var t = document.querySelector('#t');

  t.name = 'Eric';

  t.greeting = 'How are you today?';

</script>

در مثال بالا، آیتم های name و greeting از بخش جاوا اسکریپت به کد html اپلیکیشن متصل (bind) شده اند.

 

اتصال داده های نقشه و جهت (Map & Direction):

در مرحله قبل، دستور زیر را برای مقداردهی متد map از المان direction تعریف کردیم:

document.querySelector('google-map-directions').map = this.map;

هر دو المان map و directions متد map را در properties object های خود تعریف می کند. این به این معنی است که شما می توانید از یک اتریبیوت برای اتصال داده (data-bind) دو property استفاده کنید.

نکته: دقت کنید که وقتی property از المانی را data-bind می کنیم، نام اتریبیوت با حروف کوچک (lower-case) خواهد بود و با خط فاصله (-) از هم جدا می شود بجای اینکه کمل کیس (camel case) باشد مانند myAttribute. مستندات پلیمر در زمینه "attribute to property mappings" را مطالعه نمائید.

  • در صفحه index.html المان <script> که در مرحله قبل (چهارم) اضافه کردید را حذف کنید.
  • تمام کدهای موجود در <body> را داخل تگ <template is="dom-bind"> قرار دهید.
  • اتریبیوت map موجود در <google-map> را به اتریبیوت map المان <google-map-directions> متصل (bind) کنید. اطمینان حاصل کنید که اینکارها را در <template is="dom-bind"> انجام داده باشید. پس از انجام ایم موارد، property های المان ها به هم متصل (bind) می شوند. از این پس، اگر یکی از آنها تغییر کند، دیگری نیز عوض خواهد شد.

 

<template is="dom-bind">

    <google-map map="{{map}}" …></google-map>

    <google-map-directions map="{{map}}" …></google-map-directions>

</template>

 

نکته: ما از {{map}} بعنوان نام اتصال property استفاده کردیم. اما شما می توانید نام دلخواه خود را برای آن در نظر بگیرید. مانند: map="{{foo}}"

 

» اتصال داده بین المان های آدرس و جهت:

هم اکنون مطابق کد زیر، دو آدرس ابتدا و انتها بصورت "San Francisco" و "Mountain View" تعریف شده اند.

<google-map-directions start-address="San Francisco" end-address="Mountain View" api-key="YOUR_KEY">

</google-map-directions>

به همین ترتیب، دو ورودی آدرس (Address inputs) به شکل زیر تعریف شده اند:

<paper-input label="Start address" value="San Francisco"></paper-input>

<paper-input label="End address" value="Mountain View"></paper-input>

ما می توانیم این موارد را بصورت داینامیک پیاده سازی کنیم (بصورت دستی یا hard-code نباشند.) بدین منظور، input های آدرس را به اتریبیوت های <google-map-directions> متصل (bind) می کنیم.

به صورت زیر، startAddress و endAddress را به input های متناظر آنها متصل کنید:

 

فایل index.html:

<template is="dom-bind">

    <google-map map="{{map}}" latitude="37.779" longitude="-122.3892"

                api-key="YOUR_KEY" disable-default-ui zoom="13">

        <google-map-marker latitude="37.779" longitude="-122.3892"

                           title="Go Giants!" draggable="true"></google-map-marker>

    </google-map>

    <google-map-directions map="{{map}}"

                           start-address="{{start}}"

                           end-address="{{end}}"

                           api-key="YOUR_KEY"></google-map-directions>

    <paper-card elevation="2">

        <paper-icon-item>

            <iron-icon icon="search" item-icon></iron-icon>

            <paper-input label="Start address"

                         value="{{start}}"></paper-input>

        </paper-icon-item>

        <paper-icon-item>

            <iron-icon icon="search" item-icon></iron-icon>

            <paper-input label="End address"

                         value="{{end}}"></paper-input>

        </paper-icon-item>

    </paper-card>

</template>

 

دقت کنید که نامی که در {{}} تعریف می کنید اهمیتی ندارد (دلخواه می باشد). البته باید نامی که در اینجا انتخاب می کنید با نام property های متناظر آن یکسان باشد.

 

اجرای اپلیکیشن (Run the App):

  • دکمه run app  را بزنید تا برنامه اجرا شود.
  • نام CA را بعنوان آدرس ابتدایی در INPUT مربوطه بنویسید.
  • نام NYC را بعنوان آدرس انتهایی وارد کنید.

 

اکنون شما مطابق تصویر زیر، نقشه ای را مشاهده می کنید که مسیر رانندگی بین دو شهر California و New York را مشخص کرده است:

اتصال داده بین المان های آدرس و جهت

آدرس های مختلفی را برای تست عملکرد صحیح نقشه خود بنویسید.

 

فایل index.html:

کدهای کلی این فایل بصورت زیر خواهد بود:

<body>

    <template is="dom-bind">

        <google-map map="{{map}}" latitude="37.779"

                    longitude="-122.3892" api-key="YOUR_KEY"

                    disable-default-ui zoom="13">

            <google-map-marker latitude="37.779" longitude="-122.3892"

                               title="Go Giants!" draggable="true"></google-map-marker>

        </google-map>

        <google-map-directions map="{{map}}"

                               start-address="{{start}}"

                               end-address="{{end}}"

                               api-key="YOUR_KEY"></google-map-directions>

        <paper-card elevation="2">

            <paper-icon-item>

                <iron-icon icon="search" item-icon></iron-icon>

                <paper-input label="Start address"

                             value="{{start}}"></paper-input>

            </paper-icon-item>

            <paper-icon-item>

                <iron-icon icon="search" item-icon></iron-icon>

                <paper-input label="End address"

                             value="{{end}}"></paper-input>

            </paper-icon-item>

        </paper-card>

    </template>

</body>

 

» تغییر نحوه سفر (Form of Travel)

 

Import کردن کامپوننت برای این مرحله:

در فایل index.html کد زیر را به بخش head صفحه وارد کنید:

<head>

    ….

    <link rel="import" href="bower_components/iron-icons/maps-icons.html">

    <link rel="import" href="bower_components/paper-tabs/paper-tabs.html">

</head>

نکته: صفحه map-icons.html برای لود آیکون های Polymer الزامی می باشد. شما در آینده از این مجموعه آیکون ها برای نمایش حال سفر (Travel mode) استفاده خواهید کرد.

 

ایجاد سلکتور حالت سفر (Travel mode selector):

ما از المان <paper-tabs> برای فراهم کردن امکان انتخاب نوع سفر توسط کاربران استفاده می کنیم. هر نوع ترانزیت (Transit mode) هم از آیکون های موجود در مجموعه آیکون ها (icons-set) استفاده می کند (بجای نمایش آیکون های پیش فرض).

برای استفاده از سایر مجموعه آیکونها، اتریبیوت icon فرمت <iconset>:<name> را قبول می کند که iconset نام مجموعه آیکونها و name نام آیکون خاصی از آن مجموعه می باشد. در مثال زیر، از مجموعه آیکونهای maps ، آیکون directions-car را انتخاب کرده ایم:

<iron-icon icon="maps:directions-car" item-icon></iron-icon>

 

المان <google-map-directions> شامل خاصیت travelMode می باشد که برای مشخص کردن نوع جهت برای رندر کردن می باشد. چهار مقدار می تواند داشته باشد: "DRIVING", "WALKING", "BICYCLING", "TRANSIT"

۱- در صفحه index.html و داخل <paper-card> یک المان <paper-tabs> بهمراه نوع سفر (travel mode) تعریف کنید.

۲- داخل paper-tabs چهار المان paper-tab تعریف کنید که هر کدام از آنها شامل iron-icon و span (جهت نمایش متن راهنما) می باشند:

<paper-card elevation="2">

    …

    <!– selected="0" selects the first item in the tab list.

         Change it to another index if you want a different default. –>

    <paper-tabs selected="0">

        <paper-tab>

            <iron-icon icon="maps:directions-car"></iron-icon>

            <span>DRIVING</span>

        </paper-tab>

        <paper-tab>

            <iron-icon icon="maps:directions-walk"></iron-icon>

            <span>WALKING</span>

        </paper-tab>

        <paper-tab>

            <iron-icon icon="maps:directions-bike"></iron-icon>

            <span>BICYCLING</span>

        </paper-tab>

        <paper-tab>

            <iron-icon icon="maps:directions-transit"></iron-icon>

            <span>TRANSIT</span>

        </paper-tab>

    </paper-tabs>

</paper-card>

 

استایل دهی تب ها:

المان <paper-tabs> بطور پیش فرض استایل دارد. دارای رنگ زرد متریال دیزاین می باشد که فعال بودن آن توسط یک نوار مشخص می شود. اما می توان آنرا زیباتر کرد!

Polymer به منظور شخصی سازی استایل های المان های کامپوننت، از CSS Custom Property پشتیبانی می کند. بعنوان نمونه، paper-tabs از –paper-tabs-selection-bar-color برای سفارشی سازی رنگ تب ها بکار می رود.

برای تعریف استایل های موردنظر، باید به شکل زیر از <style> استفاده کنید:

<head>

    …

    <style is="custom-style">

         paper-tabs {

             –paper-tabs-selection-bar-color: #0D47A1;

             margin-top: 16px;

         }

 

         paper-tab {

             –paper-tab-ink: #BBDEFB;

         }

 

             /* Other styles that make things more pleasant.

        These could instead be added in styles.css since they

        do not use any Polymer styling features. */

             paper-tab iron-icon {

                 margin-right: 10px;

             }

 

             paper-tab.iron-selected {

                 background: rgb(66, 133, 244);

                 color: white;

             }

    </style>

</head>

با تعریف مقداری استایل، می توان رنگ و لعاب زیبایی را به تب های متریال دیزاین خود بدهیم.

استایل دهی تب های اپلیکیشن

 

 

اتصال داده بین نوع سفر و جهت رانندگی:

آخرین کاری که باید انجام دهید، اتصال داده خاصیت travelMode از المان <google-map-directions> به خاصیت selected از المان <paper-tabs> می باشد. تب ها این property را وقتی یک آیتم فرزند انتخاب می شود، آپدیت می کند. بطور پیش فرض، روی ایندکس آیتم انتخاب شده تنظیم می باشد. ما باید آنرا با نوع جهت بازنویسی (override) کنیم. خاصیت attr-for-selected اینکار را انجام می دهد:

فایل index.html:

<google-map-directions map="{{map}}" api-key="YOUR_KEY"

                       start-address="{{start}}"

                       end-address="{{end}}"

                       travel-mode="[[travelMode]]"></google-map-directions>

<paper-card>

    <paper-tabs selected="{{travelMode}}" attr-for-selected="label">

        <paper-tab label="DRIVING">

            <iron-icon icon="maps:directions-car"></iron-icon>

            <span>DRIVING</span>

        </paper-tab>

        <paper-tab label="WALKING">

            <iron-icon icon="maps:directions-walk"></iron-icon>

            <span>WALKING</span>

        </paper-tab>

        <paper-tab label="BICYCLING">

            <iron-icon icon="maps:directions-bike"></iron-icon>

            <span>BICYCLING</span>

        </paper-tab>

        <paper-tab label="TRANSIT">

            <iron-icon icon="maps:directions-transit"></iron-icon>

            <span>TRANSIT</span>

        </paper-tab>

    </paper-tabs>

</paper-card>

 

اجرای اپلیکیشن (Run the App):

  • دکمه run app را بفشارید!
  • نام SF را بعنوان آدرس ابتدایی بنویسید.
  • نام Oakland, CA را بعنوان آدرس انتهایی وارد کنید.
  • روی انواع مختلف سفر (رانندگی، پیاده روی، دوچرخه سواری و ترانزیت) کلیک کنید.

 

نقشه گوگل باید طبق نوع سفر، خود را آپدیت کند:

نقشه گوگل بهمراه تعیین نوع سفر

 

نتیجه گیری:

شما اکنون توانستید یک اپلیکیشن برای نمایش نقشه گوگل ایجاد کنید که قابلیت نمایش جهت رانندگی و نیز آدرس مبدا و مقصد داینامیک را دارد.

 

آنچه که در این مقاله یاد گرفته‌اید:

  • نحوه شروع یک پروژه بر اساس Polymer توسط Chrome Dev Editor
  • نحوه استفاده از المان های iron ، paper و مجموعه کامپوننت های وب گوگل.
  • نحوه استفاده از سیستم استایل دهی پلیمر و تعریف css سفارشی برای زیباسازی کامپوننت های وب.
  • نحوه استفاده از ویژگی اتصال داده (Data-Bind) پلیمر (Polymer)

 

منبع: https://codelabs.developers.google.com/codelabs/polymer-maps/index.html?index=..%2F..%2Findex#0


برچسب‌ها:

Google MapGooglemapپلیمرجهات رانندگیطراحی نقشه گوگلکامپوننت وبگوگل مپمتریال دیزایننشانگر نقشهنقشه گوگل

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

سه × 3 =