I have a what3words map overlayed with what3words (html)
how can I add a button that reveals the users current location? I have added the code below which displays and works perfectly, showing the map with w3w overlay and can select the a square but there’s no button for current location.
I have tried many solutions online but just seem to get stuck, nothing works. thanks in advance.
<!DOCTYPE html>
<html>
<head>
<script
type="module"
src="https://cdn.what3words.com/[email protected]/dist/what3words/what3words.esm.js"
></script>
<script
nomodule
src="https://cdn.what3words.com/[email protected]/dist/what3words/what3words.js"
></script>
<style>
#map {
height: 100%;
width: 100%;
position: absolute;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<what3words-map
id="w3w-map"
api_key="******"
map_api_key="*******************************************"
zoom="8"
selected_zoom="20"
lng="-0.195521"
lat="51.520847"
search_control_position="2"
map_type_control
zoom_control
fullscreen_control
fullscreen_control_position="3"
current_location_control_position="9"
disable_default_ui
map_type_id="satellite"
words="filled.count.soap"
provider="google"
>
<div slot="map" id="map"></div>
<div slot="search-control">
<what3words-autosuggest>
<input type="text" placeholder="e.g. ///filled.count.soap" />
</what3words-autosuggest>
</div>
</what3words-map>
</body>
<script>
document
.getElementById("w3w-map")
.addEventListener("selected_square", console.log);
</script>
</html>