-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
57 lines (55 loc) · 1.33 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
<!-- 2023 09 14 = works!
-->
<head>
<script type="module" defer src="https://cdn.what3words.com/[email protected]/dist/what3words/what3words.esm.js"></script>
<script nomodule defer src="https://cdn.what3words.com/[email protected]/dist/what3words/what3words.js"></script>
<style>
html, body {
margin: 0px;
height: 100%;
}
#map-container {
width: 100vw;
height: 100vh;
}
#search-container {
margin: 10px 0 0 10px;
}
#search-input {
width: 300px;
}
#current-location-container {
margin: 0 10px 10px 0;
}
</style>
</head>
<body>
<what3words-map
id="w3w-map"
api_key="my-key"
map_api_key="my-key"
disable_default_ui
fullscreen_control
map_type_control
zoom_control
current_location_control_position="9"
fullscreen_control_position="3"
search_control_position="2"
words="filled.count.soap"
>
<div slot="map" id="map-container"></div>
<div slot="search-control" id="search-container">
<what3words-autosuggest>
<input
id="search-input"
type="text"
placeholder="Find your address"
autocomplete="off"
/>
</what3words-autosuggest>
</div>
<div slot="current-location-control" id="current-location-container">
<button>Current Location</button>
</div>
</what3words-map>
</body>