designer

designer.html

<link rel="import" href="../google-map/google-map.html">
<link rel="import" href="../google-map/google-map-search.html">
<link rel="import" href="../polymer-ui-field/polymer-ui-field.html">
<link rel="import" href="../polymer-ui-icon/polymer-ui-icon.html">
<link rel="import" href="../polymer-ui-tabs/polymer-ui-tabs.html">
<style>
  #google_map {
    width: 400px;
    height: 400px;
    display: block;
    position: absolute;
    left: 210px;
    top: 130px;
  }
  #google_map_search {
    position: absolute;
    left: 310px;
    top: 670px;
  }
  #polymer_ui_field {
    position: absolute;
    left: 280px;
    top: 40px;
  }
  #canvas {
    overflow: hidden;
  }
  #polymer_ui_tabs {
    position: absolute;
    left: 160px;
    top: 650px;
  }
</style>
<google-map latitude="{{ $.google_map_search.result.latitude }}" longitude="{{ $.google_map_search.result.longitude }}" zoom="18" showcentermarker="true" maptype="satellite" version="3.exp" id="google_map"></google-map>
<google-map-search query="{{ $.input.value }}" map="{{ $.google_map.map }}" id="google_map_search"></google-map-search>
<polymer-ui-field icon="search" theme="polymer-ui-light-theme" id="polymer_ui_field" class="align-center flexbox">
  <polymer-ui-icon size="24" icon="search" id="polymer_ui_icon"></polymer-ui-icon>
  <input id="input" placeholder="text input" value="345 spear street" flex>
</polymer-ui-field>
<polymer-ui-tabs selected="satellite" valueattr="textContent" selectedclass="polymer-selected" selectedattribute="active" selectedindex="1" activateevent="tap" id="polymer_ui_tabs" class="flexbox">
  <span id="span">roadmap</span>
  <span id="span1" class=" polymer-selected" active>satellite</span>
</polymer-ui-tabs>