daily pastebin goal
41%
SHARE
TWEET

Untitled

a guest Apr 16th, 2018 137 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <link rel="import" href="../core-scaffold/core-scaffold.html">
  2. <link rel="import" href="../core-header-panel/core-header-panel.html">
  3. <link rel="import" href="../core-menu/core-menu.html">
  4. <link rel="import" href="../core-item/core-item.html">
  5. <link rel="import" href="../core-icon-button/core-icon-button.html">
  6. <link rel="import" href="../core-toolbar/core-toolbar.html">
  7. <link rel="import" href="../core-field/core-field.html">
  8. <link rel="import" href="../core-icon/core-icon.html">
  9. <link rel="import" href="../core-input/core-input.html">
  10. <link rel="import" href="../core-icons/core-icons.html">
  11. <link rel="import" href="../core-menu/core-submenu.html">
  12. <link rel="import" href="../google-map/google-map.html">
  13. <link rel="import" href="../google-map/google-map-search.html">
  14.  
  15. <polymer-element name="my-element">
  16.  
  17.   <template>
  18.     <style>    
  19.       #design_host {
  20.         position: absolute;
  21.         width: 100%;
  22.         height: 100%;
  23.         box-sizing: border-box;
  24.       }
  25.       #core_scaffold {
  26.         position: absolute;
  27.         top: 0px;
  28.         right: 0px;
  29.         bottom: 0px;
  30.         left: 0px;
  31.         width: 100%;
  32.         height: 100%;
  33.       }
  34.       #core_header_panel {
  35.         background-color: rgb(255, 255, 255);
  36.       }
  37.       #core_toolbar {
  38.         background-color: rgb(79, 125, 201);
  39.         color: rgb(255, 255, 255);
  40.       }
  41.       #core_menu {
  42.         font-size: 16px;
  43.       }
  44.       #google_map {
  45.         width: 100%;
  46.         height: 100%;
  47.         display: block;
  48.         left: 0px;
  49.         top: 0px;
  50.         position: absolute;
  51.       }
  52.       #google_map_search {
  53.         left: 360px;
  54.         top: 230px;
  55.         position: absolute;
  56.       }
  57.       #core_field {
  58.         left: 0px;
  59.         top: 0px;
  60.         position: relative;
  61.         background-color: rgb(255, 255, 255);
  62.         width: 95%;
  63.       }
  64.       #core_icon {
  65.         position: relative;
  66.         left: 0px;
  67.         top: 0px;
  68.       }
  69.       #input {
  70.         padding: 15px;
  71.         width: 70%;
  72.       }
  73.     </style>
  74.     <core-scaffold id="core_scaffold">
  75.       <core-header-panel mode="seamed" id="core_header_panel" navigation flex>
  76.         <core-toolbar id="core_toolbar">
  77.           <core-field id="core_field" icon="search" theme="core-light-theme" center horizontal layout>
  78.             <core-icon icon="search" id="core_icon"></core-icon>
  79.             <input id="input" placeholder="type something..." is="core-input">
  80.           </core-field>
  81.         </core-toolbar>
  82.         <core-menu selected="Roadmap" valueattr="label" selectedindex="0" id="core_menu" theme="core-light-theme">
  83.           <core-item id="core_item" on-tap="{{ showRoad }}" icon="settings" label="Roadmap" horizontal center layout active></core-item>
  84.           <core-item id="core_item1" on-tap="{{ showSat }}" icon="settings" label="Satellite" horizontal center layout></core-item>
  85.         </core-menu>
  86.       </core-header-panel>
  87.       <div id="div" tool>{{ $.core_menu.selected }}</div>
  88.       <google-map apikey="AIzaSyDZeVlbZJFj7X2GhpQHQVJa2RWuvd5CKgs" latitude="{{ $.google_map_search.result.latitude }}" longitude="{{ $.google_map_search.result.longitude }}" zoom="18" id="google_map"></google-map>
  89.       <google-map-search map="{{ $.google_map.map }}" query="{{ $.input.value }}" id="google_map_search"></google-map-search>
  90.     </core-scaffold>
  91.   </template>
  92.  
  93.   <script>
  94.  
  95.     Polymer({
  96.       showRoad: function() {
  97.         this.$.google_map.mapType = 'roadmap';
  98.       },
  99.       showSat: function() {
  100.         this.$.google_map.mapType = 'satellite';
  101.       }
  102.     });
  103.  
  104.   </script>
  105.  
  106. </polymer-element>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top