This repository has been archived by the owner on Sep 10, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 14
/
Copy pathindex.html
111 lines (92 loc) · 3.03 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!doctype html>
<html>
<head>
<title>Polymer material design nearby places search</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js" async></script>
<link rel="import" href="elements.build.html" async>
<style is="custom-style">
body {
overflow:hidden;
}
body.loaded #loading {
opacity: 0;
}
paper-button {
position: absolute;
top: 16px;
left: 16px;
z-index: 100;
background-color: white;
@apply(--paper-font-button);
}
#search {
position: absolute;
z-index: 1;
margin-top: 16px;
width: 100%;
pointer-events: none;
}
positional-search {
pointer-events: all;
}
#loading {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 600ms ease-in-out;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' width='150' height='150'><path fill='#fff' d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/></svg>") no-repeat 50% calc(50% - 100px);
background-size: 200px;
background-color: rgb(38,38,38);
}
#loading::after {
content: 'Loading map things';
color: #fff;
font-weight: 300;
font-family: 'Roboto', sans-serif;
font-size: 28px;
margin-top: 100px;
}
@media (max-width: 600px) {
#card-title {
margin-left: calc(56px - 24px/2);
}
}
</style>
</head>
<body class="fullbleed">
<div id="loading"></div>
<template is="dom-bind" id="t">
<div id="search" class="layout vertical center-center">
<positional-search active="{{getLocation}}" query="{{query}}"
on-geo-response="_onGeoResponse"
on-search="_onSearch"
loading="{{_searching}}"></positional-search>
</div>
<google-map-search map="[[map]]" query="[[query]]" radius="5000" results="{{results}}"
on-google-map-search-results="_onMapResults"></google-map-search>
<google-map-directions
end-address="[[selectedMarker.formatted_address]]"
on-google-map-response="_onDirectionsResponse"></google-map-directions>
<google-map map="{{map}}" latitude="[[lat]]" longitude="[[lng]]"
zoom="12" disable-default-ui>
<template id="markerlist" is="dom-repeat" items="{{results}}" as="marker">
<google-map-marker latitude="[[marker.latitude]]"
longitude="[[marker.longitude]]"
click-events on-google-map-marker-click="_onMarkerClick"
animation="DROP">
</google-map-marker>
</template>
</google-map>
<array-selector id="markerselector" items="{{results}}"
selected="{{selectedMarker}}"></array-selector>
<info-card marker="[[selectedMarker]]" on-show-directions="_showDirections"></info-card>
</template>
<script src="app.js"></script>
</body>
</html>