<!doctype html>
<!-- Copyright (c) 2015 Google Inc. All rights reserved. -->
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>google-sheets Demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="../../iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="../google-sheets.html">
<link rel="import" href="../../google-map/google-map.html">
<style>
* {
box-sizing: border-box;
}
body {
margin: 2em;
font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial;
font-weight: 300;
background-color: #f1f1f3;
}
a {
text-decoration: none;
color: blue;
}
ul {
padding-left: 0;
}
ul, li {
list-style: none;
font-size: 14px;
}
section {
border-radius: 3px;
box-shadow: 1px 1px 3px #ccc;
padding: 1em 2em;
background-color: white;
width: 500px;
height: 500px;
}
google-map {
display: block;
height: 100%;
width: 100%;
}
main {
justify-content: space-around;
margin-top: 2em;
}
</style>
</head>
<body>
<p>A <code><google-sheets></code> element returns data from a Google Spreadsheet:</p>
<main class="layout horizontal">
<template id="container" is="dom-bind">
<section>
<!-- Example: published spreadsheet -->
<google-sheets id="sheet" key="0Anye-JMjUkZZdDBkMVluMEhZMmFGeHpYdDJJV1FBRWc" tab-id="1"
published rows="{{rows}}" tab="{{tab}}" open-in-google-docs-url="{{openInGoogleDocsUrl}}"></google-sheets>
<heading>
<h3>Spreadsheet rows:
<a href="{{openInGoogleDocsUrl}}" target="_blank" title="Open in Google Docs →">
"<span>{{tab.title}}</span>" tab
</a>
</h3>
<h5>updated: <span>{{tab.updated}}</span>, by: <template is="dom-repeat" items="{{rows.authors}}">{{item.name}}</template></h5>
</heading>
<ul>
<template is="dom-repeat" items="[[rows]]">
<li>Name: <span>{{item.gsx$name.$t}}</span> ( lat: <span>{{item.gsx$lat.$t}}</span>, lng: <span>{{item.gsx$lng.$t}}</span> )</li>
</template>
</ul>
</section>
<section style="padding: 0;">
<google-map disable-default-ui fit-to-markers>
<template is="dom-repeat" items="[[rows]]">
<google-map-marker latitude="{{item.gsx$lat.$t}}" longitude="{{item.gsx$lng.$t}}"></google-map-marker>
</template>
</google-map>
<button on-click="useTab" data-tabid="1">View tab 1 data</button>
<button on-click="useTab" data-tabid="2">View tab 2 data</button>
</section>
</template>
</main>
<script>
var template = document.querySelector('#container');
template.useTab = function(e, detail, sender) {
document.querySelector('#sheet').tabId = Number(e.currentTarget.dataset.tabid);
};
</script>
</body>
</html>