jlengrand/web-components-workshop-polymer
1
0
Fork 0
mirror of https://github.com/jlengrand/web-components-workshop-polymer.git synced 2026-03-10 08:51:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Step 4: Adds dynamic google maps directions

Browse Source
This commit is contained in:
Julien Lengrand-Lambert
2017-12-13 13:21:32 +01:00
parent a627f901ea
commit 4dccb0aa90
2 changed files with 30 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
bower.json
View File

@@ -12,11 +12,15 @@
"url": "git+https://github.com/jlengrand/web-components-workshop-polymer.git"
},
"homepage": "https://github.com/jlengrand/web-components-workshop-polymer",
"authors": [
"Julien Lengrand-Lambert <julien@lengrand.fr>"
],
"dependencies": {
"polymer": "^2.3.0",
"google-map": "^2.0.3",
"paper-input": "^2.0.5"
},
"resolutions": {
"polymer": "2"
}
}

18
index.html
View File

@@ -4,9 +4,12 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/src/components/hello-world.html">
<link rel="import" href="/bower_components/google-map/google-map.html">
<link rel="import" href="/bower_components/google-map/google-map-directions.html">
<link rel="import" href="/bower_components/paper-input/paper-input.html">
<!--https://developers.google.com/maps/documentation/javascript/get-api-key -->
@@ -25,14 +28,25 @@
<hello-world></hello-world>
<dom-bind>
<template>
<div id="map">
<google-map latitude="52.092876" longitude="5.104480" zoom="13"
<google-map map="{{map}}" latitude="52.092876" longitude="5.104480" zoom="13"
api-key="AIzaSyD3E1D9b-Z7ekrT3tbhl_dy8DCXuIuDDRc">
<google-map-marker latitude="52.092876" longitude="5.104480"
title="UTrecht!">
title="Utrecht!">
</google-map-marker>
</google-map>
<google-map-directions
map="{{map}}"
start-address="{{start}}"
end-address="Utrecht Central"
api-key="AIzaSyD3E1D9b-Z7ekrT3tbhl_dy8DCXuIuDDRc">
</google-map-directions>
</div>
<paper-input label="Start location" value="{{start}}"></paper-input>
</template>
</dom-bind>
</body>
</html>