WebCompDev / COMPONENTS

Blame view

bower_components/google-map/demo/index.html 2.41 KB
Edit Raw Normal View History
73bcce88   luigser   COMPONENTS 
1
2
3
4
5
6
 
  <!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 Map demo</title>
eb240478   Luigi Serra   public room cards... 
7
 
    <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
73bcce88   luigser   COMPONENTS 
8
9
 
    <link rel="import" href="../google-map.html">
    <link rel="import" href="../google-map-marker.html">
eb240478   Luigi Serra   public room cards... 
10
 
    <link rel="import" href="../google-map-poly.html">
73bcce88   luigser   COMPONENTS 
11
12
13
14
15
16
17
18
19
20
21
22
23
 
    <link rel="import" href="../google-map-directions.html">
    <style>
      body {
        margin: 0;
        height: 100vh;
      }
      #controlsToggle {
        position: absolute;
        left: 10%;
        bottom: 10%;
      }
    </style>
  </head>
a1a3bc73   Luigi Serra   graphs updates 
24
 
  <body class="fullbleed">
73bcce88   luigser   COMPONENTS 
25
73bcce88   luigser   COMPONENTS 
26
 
  <google-map latitude="37.779" longitude="-122.3892" min-zoom="9" max-zoom="11"
eb240478   Luigi Serra   public room cards... 
27
 
              language="en">
73bcce88   luigser   COMPONENTS 
28
 
    <google-map-marker latitude="37.779" longitude="-122.3892"
a1a3bc73   Luigi Serra   graphs updates 
29
 
                       title="Go Giants!" draggable="true" drag-events>
73bcce88   luigser   COMPONENTS 
30
31
 
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/San_Francisco_Giants_Cap_Insignia.svg/200px-San_Francisco_Giants_Cap_Insignia.svg.png" />
    </google-map-marker>
eb240478   Luigi Serra   public room cards... 
32
33
34
35
36
 
    <google-map-poly closed fill-color="red" fill-opacity=".25" stroke-weight="1">
      <google-map-point latitude="37.779" longitude="-122.3892"></google-map-point>
      <google-map-point latitude="37.804" longitude="-122.2711"></google-map-point>
      <google-map-point latitude="37.386" longitude="-122.0837"></google-map-point>
    </google-map-poly>
73bcce88   luigser   COMPONENTS 
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
  </google-map>
  
  <google-map-directions start-address="Oakland" end-address="Mountain View"
              language="en"></google-map-directions>
  
  <button id="controlsToggle" onclick="toggleControls()">Toggle controls</button>
  
  <script>
    var gmap = document.querySelector('google-map');
    gmap.addEventListener('api-load', function(e) {
      document.querySelector('google-map-directions').map = this.map;
    });
  
    function toggleControls() {
      gmap.disableDefaultUi = !gmap.disableDefaultUi;
    }
a1a3bc73   Luigi Serra   graphs updates 
53
54
55
56
57
58
59
60
61
62
63
64
 
  
    var marker = document.querySelector('google-map-marker');
    var poly = document.querySelector('google-map-poly');
    var point = document.querySelector('google-map-point');
  
    marker.addEventListener('google-map-marker-dragend', function(e) {
      var latLng = e.detail.latLng;
      console.log('pin dropped', latLng.lat(), latLng.lng());
      point.latitude = latLng.lat();
      point.longitude = latLng.lng();
      poly._buildPathFromPoints();
    });
73bcce88   luigser   COMPONENTS 
65
66
67
 
  </script>
  </body>
  </html>