I'm making a website and I would like to be able to show a location a user has entered on an open street map for example a user might enter "London" in to the input field then it shows them that location on the map.
This is the current html file I've got for it at the moment:
<!DOCTYPE html>
<html>
<head>
<title>TESTING</title>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet"/>
</head>
<body onload="showLocation();">
<input type="text" id="locInput">
<button onclick="showLocation();">Find the location!</button>
<div id="osm-map"></div>
<script type="text/javascript">
function showLocation() {
var element = document.getElementById('osm-map');
var location = document.getElementById('locInput').value;
console.log(location);
element.style = 'height:500px; width:500px;';
var map = L.map(element);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var target = L.latLng('40.7128', '-74.00601');
map.setView(target, 10);
L.marker(target).addTo(map);
}
</script>
</body>
</html>
