I found this code click here and edited to show the marker coordinates in textarea field once the user clicks on the map to add a marker but it gave an error Uncaught TypeError: document.getElementById(...) is null
.
I need someone to help making this works. thank you.
map = folium.Map(location=[lat, lng], zoom_start=20)
# country = location.country
marker = folium.Marker(
[lat, lng],
zoom_start=20,
tooltip=tooltip,
width=100,
height=70,
icon=folium.Icon(color="red", icon=""),
popup=site,
).add_to(map)
map.add_child(folium.LatLngPopup())
mapJsVar = map.get_name()
map.get_root().html.add_child(
folium.Element(
"""
<script type="text/javascript">
$(document).ready(function () {
{map}.on("click", addMarker);
function addMarker(e) {
// ustawiamy aby marker był przesuwalny
const marker = new L.marker(e.latlng, {
draggable: true,
}).addTo({map});
document.getElementById('clk_lat1').innerHTML = marker.getLatLng().lat;
document.getElementById('clk_lng1').innerHTML = marker.getLatLng().lng;
}
});
</script>
""".replace(
"{map}", mapJsVar
)
)
)
map = map._repr_html_()
context = {"map": map}
this is the HTML code:
<div align="center" class="form-group"></div>
<p style="font-size:18px; color:blue;">Marker Location:</p>
<div >
Lat:
<text-area name="clk_lat1" id = "clk_lat1" >
</text-area>
Lng:
<text-area name="clk_lng1" id = "clk_lng1" ></text-area>
</div>
</div>