|
4 | 4 | SPDX-License-Identifier: Apache-2.0 |
5 | 5 | --> |
6 | 6 | <!--[START maps_ui_kit_place_search_text] --> |
7 | | -<!doctype html> |
| 7 | +<!DOCTYPE html> |
8 | 8 | <html> |
9 | 9 | <head> |
10 | | - <title>Place List Text Search with Google Maps</title> |
| 10 | + <title>Place Text Search with Google Maps</title> |
11 | 11 | <meta charset="utf-8" /> |
12 | 12 | <link rel="stylesheet" type="text/css" href="style.css" /> |
13 | | - <script type="module" src="./index.js"></script> |
| 13 | + <script type="module" src="./index.js" defer></script> |
| 14 | + <!-- prettier-ignore --> |
| 15 | + <script> |
| 16 | + (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) |
| 17 | + ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"}); |
| 18 | + </script> |
14 | 19 | </head> |
15 | 20 | <body> |
16 | 21 | <!--[START maps_ui_kit_place_search_text_map] --> |
17 | | - <gmp-map center="37.395641,-122.077627" zoom="10" map-id="DEMO_MAP_ID"> |
18 | | - <div class="overlay" slot="control-inline-start-block-start"> |
19 | | - <div class="text-search-container"> |
| 22 | + |
| 23 | + <div class="container"> |
| 24 | + <div class="ui-panel"> |
| 25 | + <div class="controls"> |
20 | 26 | <input |
21 | 27 | type="text" |
22 | | - id="textSearchInput" |
23 | | - placeholder="Enter text search..." /> |
24 | | - <button id="textSearchButton">Search</button> |
| 28 | + id="query-input" |
| 29 | + class="query-input" |
| 30 | + placeholder="Search for a place" |
| 31 | + value="cafe" /> |
| 32 | + <button class="search-button">Search</button> |
25 | 33 | </div> |
26 | 34 | <div class="list-container"> |
27 | | - <gmp-place-list |
28 | | - selectable |
29 | | - style="display: none"></gmp-place-list> |
| 35 | + <gmp-place-search selectable> |
| 36 | + <gmp-place-all-content></gmp-place-all-content> |
| 37 | + <gmp-place-text-search-request |
| 38 | + max-result-count="5"></gmp-place-text-search-request> |
| 39 | + </gmp-place-search> |
30 | 40 | </div> |
31 | 41 | </div> |
32 | | - <gmp-place-details style="display: none"> |
33 | | - <gmp-place-details-place-request></gmp-place-details-place-request> |
34 | | - <gmp-place-all-content></gmp-place-all-content> |
35 | | - </gmp-place-details> |
36 | | - </gmp-map> |
| 42 | + <!-- map-id is required to use advanced markers. See https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over. --> |
| 43 | + <gmp-map center="-37.813,144.963" zoom="16" map-id="DEMO_MAP_ID"> |
| 44 | + </gmp-map> |
| 45 | + </div> |
| 46 | + |
| 47 | + <!-- |
| 48 | + The gmp-place-details-compact element is styled inline because it is |
| 49 | + conditionally rendered and moved into the info window, which is |
| 50 | + part of the map's shadow DOM. |
| 51 | + --> |
| 52 | + <gmp-place-details-compact |
| 53 | + orientation="horizontal" |
| 54 | + truncation-preferred |
| 55 | + style=" |
| 56 | + width: 400px; |
| 57 | + padding: 0; |
| 58 | + margin: 0; |
| 59 | + border: none; |
| 60 | + background-color: transparent; |
| 61 | + color-scheme: light; |
| 62 | + "> |
| 63 | + <gmp-place-details-place-request></gmp-place-details-place-request> |
| 64 | + <gmp-place-content-config> |
| 65 | + <gmp-place-media></gmp-place-media> |
| 66 | + <gmp-place-rating></gmp-place-rating> |
| 67 | + <gmp-place-price></gmp-place-price> |
| 68 | + <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon> |
| 69 | + <gmp-place-open-now-status></gmp-place-open-now-status> |
| 70 | + <gmp-place-attribution |
| 71 | + light-scheme-color="gray" |
| 72 | + dark-scheme-color="white"></gmp-place-attribution> |
| 73 | + </gmp-place-content-config> |
| 74 | + </gmp-place-details-compact> |
| 75 | + |
37 | 76 | <!--[END maps_ui_kit_place_search_text_map] --> |
38 | | - <script> |
39 | | - ((g) => { |
40 | | - var h, |
41 | | - a, |
42 | | - k, |
43 | | - p = 'The Google Maps JavaScript API', |
44 | | - c = 'google', |
45 | | - l = 'importLibrary', |
46 | | - q = '__ib__', |
47 | | - m = document, |
48 | | - b = window; |
49 | | - b = b[c] || (b[c] = {}); |
50 | | - var d = b.maps || (b.maps = {}), |
51 | | - r = new Set(), |
52 | | - e = new URLSearchParams(), |
53 | | - u = () => |
54 | | - h || |
55 | | - (h = new Promise(async (f, n) => { |
56 | | - await (a = m.createElement('script')); |
57 | | - e.set('libraries', [...r] + ''); |
58 | | - for (k in g) |
59 | | - e.set( |
60 | | - k.replace( |
61 | | - /[A-Z]/g, |
62 | | - (t) => '_' + t[0].toLowerCase() |
63 | | - ), |
64 | | - g[k] |
65 | | - ); |
66 | | - e.set('callback', c + '.maps.' + q); |
67 | | - a.src = |
68 | | - `https://maps.${c}apis.com/maps/api/js?` + e; |
69 | | - d[q] = f; |
70 | | - a.onerror = () => |
71 | | - (h = n(Error(p + ' could not load.'))); |
72 | | - a.nonce = |
73 | | - m.querySelector('script[nonce]')?.nonce || ''; |
74 | | - m.head.append(a); |
75 | | - })); |
76 | | - d[l] |
77 | | - ? console.warn(p + ' only loads once. Ignoring:', g) |
78 | | - : (d[l] = (f, ...n) => |
79 | | - r.add(f) && u().then(() => d[l](f, ...n))); |
80 | | - })({ key: 'AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8', v: 'alpha' }); |
81 | | - </script> |
82 | 77 | </body> |
83 | 78 | </html> |
84 | 79 | <!--[END maps_ui_kit_place_search_text] --> |
0 commit comments