Last month I started an internship with the Polymer team at Google for my last co-op term, and I’m starting a tech blog to showcase some of the things that I’m working on. Although I have already published to several changes to the Polymer and PolymerLabs GitHub orgs, I am retroactively writing posts to cover some of the first Polymer elements I’ve created. This blog itself is a work in progress, so if you don’t like the design, stick around and give me some suggestions!

Uber recently released an API that allows developers to integrate information about their products and offer time estimates. For this example app, I wanted to incorporate Google Maps so that users can get a list of Uber products and time estimates for a given map query.

The first component, <uber-products>, displays a list of Uber products given the latitude and longitude specified in its attributes.

<uber-products
  latitude="37.77493"
  longitude="-122.41942"
  servertoken="l2DIhEmUbKH3j8Dn6-bFEDnFpkEcyj76HGfPUY8b">
</uber-products>

Demo:

<uber-estimates-time> does a similar thing, but displays time estimates as well. I named the element uber-estimates-time since the URL endpoint for the API is /estimates/time, but now I realized it’s a little backwards-sounding.

<uber-estimates-time
  latitude="37.77493"
  longitude="-122.41942"
  servertoken="l2DIhEmUbKH3j8Dn6-bFEDnFpkEcyj76HGfPUY8b">
</uber-estimates-time>

Demo:

Now let’s put these components together with a <google-map> element. With Polymer’s data binding, you can combine several elements without needing to write JavaScript code. Here’s an example:

<template is="auto-binding">
  <div horizontal layout>
    <core-icon icon="search" id="core_icon"></core-icon>
    <input is="core-input" placeholder="Location" id="query" value="345 Spear St. San Francisco" flex>
  </div>

  <google-map-search
    map="{{map}}"
    query="{{$.query.value}}"
    result="{{result}}">
  </google-map-search>

  <google-map
    block
    map="{{map}}"
    latitude="{{result.latitude}}"
    longitude="{{result.longitude}}"
    style="height: 200px">
    <google-map-marker
      latitude="{{result.latitude}}"
      longitude="{{result.longitude}}">
    </google-map-marker>
  </google-map>

  <uber-estimates-time
    latitude="{{result.latitude}}"
    longitude="{{result.longitude}}"
    servertoken="l2DIhEmUbKH3j8Dn6-bFEDnFpkEcyj76HGfPUY8b">
  </uber-estimates-time>
</template>

Demo:

The final component, <polymer-chauffeur>, uses all of these components and adds <paper-tabs> and <core-pages> to switch between <uber-products> and <uber-estimates-time>.

<polymer-chauffeur
  block
  style="height: 500px"
  servertoken="l2DIhEmUbKH3j8Dn6-bFEDnFpkEcyj76HGfPUY8b">
</polymer-chauffeur>

Demo:

That’s it for this post. Next time I’ll show you how to use <geojson-data> to draw regions onto a <google-map> element.

Note: Don’t try to use the server token in the above examples on your own site - it is restricted to requests from this domain only.