117 |
118 |
124 | [[title]]
125 |
127 |
129 | <head>
41 | ....
42 | <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
43 | <link rel="import" href="bower_components/google-map/google-map.html">
44 | </head>some codeinline
39 | An example of <google-codelab-survey>
How would rate your experience with Polymer?
39 |45 | Another question? 46 |
47 |[[json(a)]]56 | 57 | google-codelab-survey-answer detail: 58 | 59 | 60 | answers-changed detail: 61 | 62 | 63 | 64 | 65 | 80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /analytics-behavior.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 93 | -------------------------------------------------------------------------------- /test/survey.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 |
40 | q 41 |
42 |
60 |
65 |
66 |
157 |
61 |
64 | {{step}}. {{label}}
62 |An example of <google-codelab-step>
What you'll learn
47 |-
48 |
- How to start a new Polymer-based project using Chrome Dev Editor 49 |
- How to use elements in Polymer's iron, paper, and Google Web Component sets. 50 |
- How to use Polymer's data binding features to reduce boilerplate code. 51 |
The Google Web Components provide the <google-map> element for declaratively rendering a Google Map. To use it, you first need to install it using Bower.
Create a new project
58 | 59 | 66 | 67 |The first time you run Chrome Dev Editor it will ask you to setup your workspace environment.
Fire up Chrome Dev Editor and start a new project:
-
68 |
- Click
to start a new project.
69 | - Enter "PolymerMapsCodelab" as the Project name. 70 |
- In the Project type dropdown, select "JavaScript web app (using Polymer paper elements)". 71 |
- Click the Create button. 72 |
Chrome Dev Editor creates a basic scaffold for your Polymer app. In the background, it also uses Bower to download and install a list of dependencies (including the Polymer core library) into the bower_components/ folder. Fetching the components make take some time if your internet connection is slow. You'll learn more about using Bower in the next step.
bower.json
74 | 75 |PolymerMapsCodelab/
76 | bower_components/ <!-- installed dependencies from Bower -->
77 | bower.json <!-- Bower metadata files used for managing deps -->
78 | index.html <!-- your app -->
79 | main.js
80 | styles.cssInstall the element
83 | Normally, you'd run bower install GoogleWebComponents/google-map --save on the command line to install <google-map> and save it as a dependency. However, Chrome Dev Editor does not have a command line for running Bower commands. Instead, you need to manually edit bower.json to include google-map, then run Chrome Dev Editor's Bower Update feature. Bower Update checks the dependencies in bower.json and installs any missing ones.
- Edit
bower.jsonand addgoogle-mapto thedependenciesobject:
"dependencies": {
86 | "iron-elements": "PolymerElements/iron-elements#^1.0.0",
87 | "paper-elements": "PolymerElements/paper-elements#^1.0.1",
88 | "google-map": "GoogleWebComponents/google-map#^1.0.3"
89 | }-
92 |
- Right-click the
bower.jsonfilename in the editor.
93 | - Select Bower Update from the context menu. 94 |
The download may take few seconds. You can verify that <google-map> (and any dependencies) were installed by checking that bower_components/google-map/ was created and populated.
Use the element
96 | To employ <google-map>, you need to:
-
97 |
- Use an HTML Import to load it in
index.html.
98 | - Declare an instance of the element on the page. 99 |
In index.html, remove all other HTML imports in the <head> and replace them with a single import that loads google-map.html:
index.html
101 | 102 |<head>
103 | ....
104 | <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
105 | <link rel="import" href="bower_components/google-map/google-map.html">
106 | </head>Next, replace the contents of <body> with an instance of <google-map>:
index.html
111 | 112 |<body unresolved>
113 | <google-map latitude="37.779" longitude="-122.3892" zoom="13"></google-map>
114 | </body>Here's a pre block without code:
117 |$ node client.js list wdfasdf asdf asdf asdf asdf asdf asdf asdf asdf asdfa sdf asdfa sdf asdfa sdfasdfasdfasdf
118 | { books:
119 | [ { id: 123,
120 | title: 'A Tale of Two Cities',
121 | author: 'Charles Dickens' } ] }
122 |
123 | As you can see, using <google-map> is completely declarative! The map is centered using the latitude and longitude attributes and its zoom level is set by the zoom attribute.
Style the map
125 |If you run the app right now, nothing will display. In order for the map to properly display itself, you need to set its container (in this case, <body>) to have a fixed height.
Open styles.css and replace its contents with default styling:
styles.css
127 | 128 |body, html {
129 | font-family: 'Roboto', Arial, sans-serif;
130 | height: 100%;
131 | margin: 0;
132 | }Add a marker
135 |<google-map> supports adding map markers to the map by declaring <google-map-marker> elements as children. The marker locations are also set using latitude and longitude attributes.
Back in index.html, add a draggable <google-map-marker> to the map:
index.html
137 | 138 |<google-map latitude="37.779" longitude="-122.3892" zoom="13" disable-default-ui>
139 | <google-map-marker latitude="37.779" longitude="-122.3892"
140 | title="Go Giants!" draggable="true"></google-map-marker>
141 | </google-map>Notice that we've also disabled the map's controls by setting disableDefaultUi to true. Since it's a boolean property, its presence as an HTML attribute makes it truthy.
Run the app
145 |If you haven't already done so, hit the 
button. At this point, you should see a map that takes up the entire viewport and has a single marker pin.
Frequently Asked Questions
147 |-
148 |
- Where are the reference docs for <google-map> and <google-map>? 149 |
- A link to stackoverflow. 150 |
- A link to github. 151 |
- A link to developer.android.com. 152 |
- A link to webmasters support. 153 |
How would rate your experience with Polymer?
157 |
In this codelab, You'll create a fully working Google Maps app using elements in Polymer's Google Web Components collection. The app will be responsive, include driving directions, and transit a mode. Along the way, you'll also learn about Polymer's data-binding features and iron element set.
53 |What you'll learn
54 |-
55 |
- How to start a new Polymer-based project using Chrome Dev Editor 56 |
- How to use elements in Polymer's iron, paper, and Google Web Component sets. 57 |
- How to use Polymer's data binding features to reduce boilerplate code. 58 |
What you'll need
60 |-
61 |
- Basic understanding of HTML, CSS, and web development. 62 |
- Install Chrome Dev Editor or use your own editor of choice. 63 |
How would rate your experience with Polymer?
65 |Create a new project
72 | 73 | 75 | 76 |A paper-button wrapped into anchor element:
77 | 78 | 79 | 80 |The first time you run Chrome Dev Editor it will ask you to setup your workspace environment.
Fire up Chrome Dev Editor and start a new project:
-
81 |
- Click to start a new project.
82 |
- Enter "PolymerMapsCodelab" as the Project name. 83 |
- In the Project type dropdown, select "JavaScript web app (using Polymer paper elements)". 84 |
- Click the Create button. 85 |
Chrome Dev Editor creates a basic scaffold for your Polymer app. In the background, it also uses Bower to download and install a list of dependencies (including the Polymer core library) into the bower_components/ folder. Fetching the components make take some time if your internet connection is slow. You'll learn more about using Bower in the next step.
bower.json
87 | 88 |PolymerMapsCodelab/
89 | bower_components/ <!-- installed dependencies from Bower -->
90 | bower.json <!-- Bower metadata files used for managing deps -->
91 | index.html <!-- your app -->
92 | main.js
93 | styles.cssPreview the app
96 |At any point, select the index.html file and hit the 
button in the top toolbar to run the app. Chrome Dev Editor fires up a web server and navigates to the index.html page. This is great way to preview changes as you make them.
Next up
98 |At this point the app doesn't do much. Let's add a map!
99 | 100 |The Google Web Components provide the <google-map> element for declaratively rendering a Google Map. To use it, you first need to install it using Bower.
Install the element
109 | Normally, you'd run bower install GoogleWebComponents/google-map --save on the command line to install <google-map> and save it as a dependency. However, Chrome Dev Editor does not have a command line for running Bower commands. Instead, you need to manually edit bower.json to include google-map, then run Chrome Dev Editor's Bower Update feature. Bower Update checks the dependencies in bower.json and installs any missing ones.
- Edit
bower.jsonand addgoogle-mapto thedependenciesobject:
"dependencies": {
111 | "iron-elements": "PolymerElements/iron-elements#^1.0.0",
112 | "paper-elements": "PolymerElements/paper-elements#^1.0.1",
113 | "google-map": "GoogleWebComponents/google-map#^1.0.3"
114 | }-
116 |
- Right-click the
bower.jsonfilename in the editor.
117 | - Select Bower Update from the context menu. 118 |
The download may take few seconds. You can verify that <google-map> (and any dependencies) were installed by checking that bower_components/google-map/ was created and populated.
Use the element
120 | To employ <google-map>, you need to:
-
121 |
- Use an HTML Import to load it in
index.html.
122 | - Declare an instance of the element on the page. 123 |
In index.html, remove all other HTML imports in the <head> and replace them with a single import that loads google-map.html:
index.html
125 | 126 |<head>
127 | ....
128 | <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
129 | <link rel="import" href="bower_components/google-map/google-map.html">
130 | </head>Next, replace the contents of <body> with an instance of <google-map>:
index.html
135 | 136 |<body unresolved>
137 | <google-map latitude="37.779" longitude="-122.3892" zoom="13"></google-map>
138 | </body>As you can see, using <google-map> is completely declarative! The map is centered using the latitude and longitude attributes and its zoom level is set by the zoom attribute.
Style the map
141 |If you run the app right now, nothing will display. In order for the map to properly display itself, you need to set its container (in this case, <body>) to have a fixed height.
Open styles.css and replace its contents with default styling:
styles.css
143 | 144 |body, html {
145 | font-family: 'Roboto', Arial, sans-serif;
146 | height: 100%;
147 | margin: 0;
148 | }Add a marker
151 |<google-map> supports adding map markers to the map by declaring <google-map-marker> elements as children. The marker locations are also set using latitude and longitude attributes.
Back in index.html, add a draggable <google-map-marker> to the map:
index.html
153 | 154 |<google-map latitude="37.779" longitude="-122.3892" zoom="13" disable-default-ui>
155 | <google-map-marker latitude="37.779" longitude="-122.3892"
156 | title="Go Giants!" draggable="true"></google-map-marker>
157 | </google-map>Notice that we've also disabled the map's controls by setting disableDefaultUi to true. Since it's a boolean property, its presence as an HTML attribute makes it truthy.
Run the app
160 |If you haven't already done so, hit the button. At this point, you should see a map that takes up the entire viewport and has a single marker pin.
Frequently Asked Questions
162 |-
163 |
- Where are the reference docs for <google-map> and <google-map>? 164 |
- stackoverflow link 165 |
- google cloud link 166 |
58 |
59 |
71 |
72 |
73 |
74 | Novice Intermediate Advanced
90 |
91 |
92 |
93 |
118 |
119 |
120 |
121 | Install the
126 | Use the
137 |
183 |
184 |
185 |
186 |
189 |
190 |
191 |
192 |
--------------------------------------------------------------------------------
/google-codelab.html:
--------------------------------------------------------------------------------
1 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
67 | Codelabs > Build Google Maps Using Web Components & No Code!
60 | 61 |Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis dolor vel arcu blandit tristique. Proin vestibulum nec felis non fringilla. Pellentesque vulputate dui ut risus bibendum, sed egestas arcu ullamcorper. Quisque eget eros pellentesque, aliquet tortor placerat, vehicula lectus. Fusce sit amet mattis turpis, et tempus orci. Vestibulum mauris velit, vulputate a risus quis, imperdiet hendrerit ante. Nunc sollicitudin risus tortor, ac venenatis sem volutpat malesuada. Mauris neque metus, ornare eget porta id, tincidunt vitae magna. In scelerisque quam auctor maximus pellentesque. Sed laoreet ex mi, vel lacinia urna consectetur id. Sed est quam, finibus eget orci in, vulputate tempus diam
62 | 63 |
In this codelab, You'll create a fully working Google Maps app using elements in Polymer's Google Web Components collection. The app will be responsive, include driving directions, and transit a mode. Along the way, you'll also learn about Polymer's data-binding features and iron element set.
75 |What you'll learn
76 |-
77 |
- How to start a new Polymer-based project using Chrome Dev Editor 78 |
- How to use elements in Polymer's iron, paper, and Google Web Component sets. 79 |
- How to use Polymer's data binding features to reduce boilerplate code. 80 |
What you'll need
82 |-
83 |
- Basic understanding of HTML, CSS, and web development. 84 |
- Install Chrome Dev Editor or use your own editor of choice. 85 |
How would rate your experience with Polymer?
87 |Create a new project
94 | 95 | 97 |The first time you run Chrome Dev Editor it will ask you to setup your workspace environment.
Fire up Chrome Dev Editor and start a new project:
-
98 |
- Click to start a new project.
99 |
- Enter "PolymerMapsCodelab" as the Project name. 100 |
- In the Project type dropdown, select "JavaScript web app (using Polymer paper elements)". 101 |
- Click the Create button. 102 |
Chrome Dev Editor creates a basic scaffold for your Polymer app. In the background, it also uses Bower to download and install a list of dependencies (including the Polymer core library) into the bower_components/ folder. Fetching the components make take some time if your internet connection is slow. You'll learn more about using Bower in the next step.
bower.json
104 | 105 |PolymerMapsCodelab/
106 | bower_components/ <!-- installed dependencies from Bower -->
107 | bower.json <!-- Bower metadata files used for managing deps -->
108 | index.html <!-- your app -->
109 | main.js
110 | styles.cssPreview the app
113 |At any point, select the index.html file and hit the button in the top toolbar to run the app. Chrome Dev Editor fires up a web server and navigates to the index.html page. This is great way to preview changes as you make them.
Next up
115 |At this point the app doesn't do much. Let's add a map!
116 | 117 |The Google Web Components provide the <google-map> element for declaratively rendering a Google Map. To use it, you first need to install it using Bower.
Install the element
126 | Normally, you'd run bower install GoogleWebComponents/google-map --save on the command line to install <google-map> and save it as a dependency. However, Chrome Dev Editor does not have a command line for running Bower commands. Instead, you need to manually edit bower.json to include google-map, then run Chrome Dev Editor's Bower Update feature. Bower Update checks the dependencies in bower.json and installs any missing ones.
- Edit
bower.jsonand addgoogle-mapto thedependenciesobject:
"dependencies": {
128 | "iron-elements": "PolymerElements/iron-elements#^1.0.0",
129 | "paper-elements": "PolymerElements/paper-elements#^1.0.1",
130 | "google-map": "GoogleWebComponents/google-map#^1.0.3"
131 | }-
133 |
- Right-click the
bower.jsonfilename in the editor.
134 | - Select Bower Update from the context menu. 135 |
The download may take few seconds. You can verify that <google-map> (and any dependencies) were installed by checking that bower_components/google-map/ was created and populated.
Use the element
137 | To employ <google-map>, you need to:
-
138 |
- Use an HTML Import to load it in
index.html.
139 | - Declare an instance of the element on the page. 140 |
In index.html, remove all other HTML imports in the <head> and replace them with a single import that loads google-map.html:
index.html
142 | 143 |<head>
144 | ....
145 | <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
146 | <link rel="import" href="bower_components/google-map/google-map.html">
147 | </head>Next, replace the contents of <body> with an instance of <google-map>:
index.html
152 | 153 |<body unresolved>
154 | <google-map latitude="37.779" longitude="-122.3892" zoom="13"></google-map>
155 | </body>As you can see, using <google-map> is completely declarative! The map is centered using the latitude and longitude attributes and its zoom level is set by the zoom attribute.
Style the map
158 |If you run the app right now, nothing will display. In order for the map to properly display itself, you need to set its container (in this case, <body>) to have a fixed height.
Open styles.css and replace its contents with default styling:
styles.css
160 | 161 |body, html {
162 | font-family: 'Roboto', Arial, sans-serif;
163 | height: 100%;
164 | margin: 0;
165 | }Add a marker
168 |<google-map> supports adding map markers to the map by declaring <google-map-marker> elements as children. The marker locations are also set using latitude and longitude attributes.
Back in index.html, add a draggable <google-map-marker> to the map:
index.html
170 | 171 |<google-map latitude="37.779" longitude="-122.3892" zoom="13" disable-default-ui>
172 | <google-map-marker latitude="37.779" longitude="-122.3892"
173 | title="Go Giants!" draggable="true"></google-map-marker>
174 | </google-map>Notice that we've also disabled the map's controls by setting disableDefaultUi to true. Since it's a boolean property, its presence as an HTML attribute makes it truthy.
Run the app
177 |If you haven't already done so, hit the button. At this point, you should see a map that takes up the entire viewport and has a single marker pin.
Frequently Asked Questions
179 | 181 | 182 |Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis dolor vel arcu blandit tristique. Proin vestibulum nec felis non fringilla. Pellentesque vulputate dui ut risus bibendum, sed egestas arcu ullamcorper. Quisque eget eros pellentesque, aliquet tortor placerat, vehicula lectus. Fusce sit amet mattis turpis, et tempus orci. Vestibulum mauris velit, vulputate a risus quis, imperdiet hendrerit ante. Nunc sollicitudin risus tortor, ac venenatis sem volutpat malesuada. Mauris neque metus, ornare eget porta id, tincidunt vitae magna. In scelerisque quam auctor maximus pellentesque. Sed laoreet ex mi, vel lacinia urna consectetur id. Sed est quam, finibus eget orci in, vulputate tempus diam
187 | 188 |
81 |
82 |
109 |
110 |
83 |
90 |
91 |
92 | {{item.step}}{{item.label}}
93 |
94 |
95 |
96 |
97 |
98 |
85 |
87 |
88 |
99 |
100 |
107 |
108 | Last updated on {{lastUpdated}}.
101 |
102 |
103 | Did you find a mistake?
104 | Please file a bug.
105 |
106 |
115 |
131 |
132 |
116 |
130 |
133 |
134 |
137 |
139 |
140 |
161 |
162 |
163 | Would you like to resume where you left off?
168 |Step {{_storedStep.step}}: {{_storedStep.label}}
169 | 173 |