|
| 1 | +<!-- |
| 2 | +Copyright (c) 2016 Google Inc. |
| 3 | +
|
| 4 | +Licensed under the Apache License, Version 2.0 (the "License"); you may not |
| 5 | +use this file except in compliance with the License. You may obtain a copy of |
| 6 | +the License at |
| 7 | +
|
| 8 | + http://www.apache.org/licenses/LICENSE-2.0 |
| 9 | +
|
| 10 | +Unless required by applicable law or agreed to in writing, software |
| 11 | +distributed under the License is distributed on an "AS IS" BASIS, WITHOUT |
| 12 | +WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the |
| 13 | +License for the specific language governing permissions and limitations under |
| 14 | +the License. |
| 15 | +--> |
| 16 | + |
| 17 | +<!doctype html> |
| 18 | +<html> |
| 19 | +<head> |
| 20 | + <meta charset="utf-8"> |
| 21 | + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> |
| 22 | + <title>codelab demo</title> |
| 23 | + <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script> |
| 24 | + <link rel="import" href="../../iron-icons/iron-icons.html"> |
| 25 | + <link rel="import" href="../../paper-button/paper-button.html"> |
| 26 | + <link rel="import" href="../google-codelab-elements.html"> |
| 27 | +</head> |
| 28 | +<body unresolved class="fullbleed"> |
| 29 | + |
| 30 | + <google-codelab title="Build Google Maps Using Web Components & No Code!" |
| 31 | + feedback-link="https://github.com/googlecodelabs" |
| 32 | + environment="web" |
| 33 | + hide-toolbar> |
| 34 | + |
| 35 | + <google-codelab-step label="Overview" duration="2"> |
| 36 | + |
| 37 | + <p><img src="img-1.png" style="max-width: 624px"></p><p>In this codelab, You'll create a fully working Google Maps app using elements in Polymer's <a href="https://elements.polymer-project.org/browse?package=google-web-components">Google Web Components</a> 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 <a href="https://elements.polymer-project.org/browse?package=iron-elements">iron element</a> set.</p> |
| 38 | +<h3 class="checklist">What you'll learn</h3> |
| 39 | +<ul class="checklist"> |
| 40 | +<li>How to start a new Polymer-based project using Chrome Dev Editor</li> |
| 41 | +<li>How to use elements in Polymer's iron, paper, and Google Web Component sets.</li> |
| 42 | +<li>How to use Polymer's data binding features to reduce boilerplate code.</li> |
| 43 | +</ul> |
| 44 | +<h3>What you'll need</h3> |
| 45 | +<ul> |
| 46 | +<li>Basic understanding of HTML, CSS, and web development.</li> |
| 47 | +<li>Install <a href="https://chrome.google.com/webstore/detail/chrome-dev-editor-develop/pnoffddplpippgcfjdhbmhkofpnaalpg?hl=en">Chrome Dev Editor</a> or use your own editor of choice.</li> |
| 48 | +</ul> |
| 49 | +<google-codelab-survey survey-id="test-survey-123"><h4>How would rate your experience with Polymer?</h4> |
| 50 | +<paper-radio-group><paper-radio-button>Novice</paper-radio-button><paper-radio-button>Intermediate</paper-radio-button><paper-radio-button>Advanced</paper-radio-button></paper-radio-group></google-codelab-survey> |
| 51 | + |
| 52 | + </google-codelab-step> |
| 53 | + |
| 54 | + <google-codelab-step label="Getting set up" duration="3"> |
| 55 | + |
| 56 | +<h2>Create a new project</h2> |
| 57 | + |
| 58 | +<aside class="special"><p>This codelab uses Chrome Dev Editor, a Chrome app IDE. If you don't have it installed yet, please install it from Chrome Web Store.</p> |
| 59 | +<p><paper-button raised class="colored"><iron-icon icon="file-download"></iron-icon><a href="https://chrome.google.com/webstore/detail/chrome-dev-editor-develop/pnoffddplpippgcfjdhbmhkofpnaalpg?hl=en">Download Chrome Dev Editor</a></paper-button></p></aside> |
| 60 | +<p>The first time you run Chrome Dev Editor it will ask you to setup your workspace environment.</p><p>Fire up Chrome Dev Editor and start a new project:</p><ol start="1"> |
| 61 | +<li>Click <img src="img-2.png" style="max-width: 27px">to start a new project.</li> |
| 62 | +<li>Enter <strong>"PolymerMapsCodelab"</strong> as the <strong>Project name</strong>.</li> |
| 63 | +<li>In the <strong>Project type</strong> dropdown, select "JavaScript web app (using Polymer paper elements)".</li> |
| 64 | +<li>Click the <strong>Create</strong> button.</li> |
| 65 | +</ol><p><img src="img-3.png" style="max-width: 343px"></p><p>Chrome Dev Editor creates a basic scaffold for your Polymer app. In the background, it also uses <a href="http://bower.io/">Bower</a> to download and install a list of dependencies (including the Polymer core library) into the <code>bower_components</code>/ folder. <strong>Fetching the components make take some time if your internet connection is slow</strong>. You'll learn more about using Bower in the next step.</p> |
| 66 | +<h3>bower.json</h3> |
| 67 | + |
| 68 | +<pre><code language="">PolymerMapsCodelab/ |
| 69 | + bower_components/ <!-- installed dependencies from Bower --> |
| 70 | + bower.json <!-- Bower metadata files used for managing deps --> |
| 71 | + index.html <!-- your app --> |
| 72 | + main.js |
| 73 | + styles.css</code></pre> |
| 74 | + |
| 75 | +<h2>Preview the app</h2> |
| 76 | +<p>At any point, select the <strong>index.html</strong> file and hit the <img src="img-4.png" style="max-width: 27px"> 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.</p><p><img src="img-5.png" style="max-width: 624px"></p> |
| 77 | +<h2>Next up</h2> |
| 78 | +<p>At this point the app doesn't do much. Let's add a map!</p> |
| 79 | + |
| 80 | + </google-codelab-step> |
| 81 | + |
| 82 | + <google-codelab-step label="Using <google-map>" duration="5"> |
| 83 | + |
| 84 | + <p>The <a href="https://elements.polymer-project.org/browse?package=google-web-components">Google Web Components</a> provide the <code><google-map></code> element for declaratively rendering a Google Map. To use it, you first need to install it using Bower.</p> |
| 85 | +<aside class="special"><p><strong>What is Bower?</strong></p> |
| 86 | +<p><a href="http://bower.io/">Bower</a> is a client-side package management tool that can be used with any web app. When working with Polymer, it simplifies the hassles of dependency management. Every component defines its own set of dependencies. When you use Bower to install a component, the component's dependencies are installed alongside it under <code>bower_components/</code>.</p></aside> |
| 87 | + |
| 88 | +<h2>Install the <google-map> element</h2> |
| 89 | +<p>Normally, you'd run <code>bower install GoogleWebComponents/google-map --save</code> on the command line to install <code><google-map></code> 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 <code>bower.json</code> to include <code>google-map</code>, then run Chrome Dev Editor's <strong>Bower Update</strong> feature. <strong>Bower Update</strong> checks the dependencies in <code>bower.json</code> and installs any missing ones.</p><ol start="1"><li>Edit <code>bower.json</code> and add <code>google-map</code> to the <code>dependencies</code> object:</li></ol> |
| 90 | +<pre class="indented"><code language="">"dependencies": { |
| 91 | + "iron-elements": "PolymerElements/iron-elements#^1.0.0", |
| 92 | + "paper-elements": "PolymerElements/paper-elements#^1.0.1", |
| 93 | + "google-map": "GoogleWebComponents/google-map#^1.0.3" |
| 94 | +}</code></pre> |
| 95 | +<ol start="2"> |
| 96 | +<li>Right-click the <code>bower.json</code> filename in the editor.</li> |
| 97 | +<li>Select <strong>Bower Update</strong> from the context menu.</li> |
| 98 | +</ol><p><img src="img-6.png" style="max-width: 220px"></p><p>The download may take few seconds. You can verify that <code><google-map></code> (and any dependencies) were installed by checking that <code>bower_components/google-map/</code> was created and populated.</p> |
| 99 | +<h2>Use the <google-map> element</h2> |
| 100 | +<p>To employ <code><google-map></code>, you need to:</p><ol start="1"> |
| 101 | +<li>Use an <a href="http://www.html5rocks.com/en/tutorials/webcomponents/imports/">HTML Import</a> to load it in <code>index.html</code>.</li> |
| 102 | +<li>Declare an instance of the element on the page.</li> |
| 103 | +</ol><p>In <code>index.html</code>,<strong> remove all other HTML imports</strong> <strong>in the</strong> <strong><head></strong> and replace them with a single import that loads <code>google-map.html</code>:</p> |
| 104 | +<h3>index.html</h3> |
| 105 | + |
| 106 | +<pre><code language=""><head> |
| 107 | + .... |
| 108 | + <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> |
| 109 | + <link rel="import" href="bower_components/google-map/google-map.html"> |
| 110 | +</head></code></pre> |
| 111 | + |
| 112 | +<aside class="warning"><p><strong>Important</strong>: all imports need to come <strong>after</strong> <code>webcomponents-lite.min.js</code> so the polyfill can properly load them.</p></aside> |
| 113 | +<p>Next, replace the contents of <code><body></code> with an instance of <code><google-map></code>:</p> |
| 114 | +<h3>index.html</h3> |
| 115 | + |
| 116 | +<pre><code language=""><body unresolved> |
| 117 | + <google-map latitude="37.779" longitude="-122.3892" zoom="13"></google-map> |
| 118 | +</body></code></pre> |
| 119 | +<p>As you can see, using <code><google-map></code> is completely declarative! The map is centered using the <code>latitude</code> and <code>longitude</code> attributes and its zoom level is set by the <code>zoom</code> attribute.</p> |
| 120 | +<h3>Style the map</h3> |
| 121 | +<p>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, <code><body></code>) to have a fixed height.</p><p>Open <code>styles.css</code> and replace its contents with default styling:</p> |
| 122 | +<h3>styles.css</h3> |
| 123 | + |
| 124 | +<pre><code language="">body, html { |
| 125 | + font-family: 'Roboto', Arial, sans-serif; |
| 126 | + height: 100%; |
| 127 | + margin: 0; |
| 128 | +}</code></pre> |
| 129 | + |
| 130 | +<h3>Add a marker</h3> |
| 131 | +<p><code><google-map></code> supports adding map markers to the map by declaring <code><google-map-marker></code> elements as children. The marker locations are also set using <code>latitude</code> and <code>longitude</code> attributes.</p><p>Back in <strong>index.html</strong>, add a draggable <code><google-map-marker></code> to the map:</p> |
| 132 | +<h3>index.html</h3> |
| 133 | + |
| 134 | +<pre><code language=""><google-map latitude="37.779" longitude="-122.3892" zoom="13" disable-default-ui> |
| 135 | + <google-map-marker latitude="37.779" longitude="-122.3892" |
| 136 | + title="Go Giants!" draggable="true"></google-map-marker> |
| 137 | +</google-map></code></pre> |
| 138 | +<p>Notice that we've also disabled the map's controls by setting <code>disableDefaultUi</code> to true. Since it's a boolean property, its presence as an HTML attribute makes it truthy.</p> |
| 139 | +<h2>Run the app</h2> |
| 140 | +<p>If you haven't already done so, hit the <img src="img-7.png" style="max-width: 29px"> button. At this point, you should see a map that takes up the entire viewport and has a single marker pin.</p><p><img src="img-8.png" style="max-width: 624px"></p> |
| 141 | +<h3 class="faq">Frequently Asked Questions</h3> |
| 142 | +<ul class="faq"><li> |
| 143 | +<a href="https://elements.polymer-project.org/elements/google-map">Where are the reference docs for <google-map> and <google-map></a>?</li></ul> |
| 144 | + |
| 145 | + </google-codelab-step> |
| 146 | + |
| 147 | + </google-codelab> |
| 148 | + |
| 149 | +</body> |
| 150 | +</html> |
0 commit comments