Hello, I'm trying to pick only the latitude and longitude from the geocoding results and display them in a textbox.
<html>
<head>
<title>Geocoding Google Maps</title>
</head>
<body>
<div>
<input type="text" id="locationinput" placeholder="Enter Location" >
<button id="geocodebutton" onclick="initMap()">Geocode</button>
<div id="map" style="width: 1000px; height: 1000px"></div><br>
<input id="coordinates">
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places&callback=initMap&channel=GMPSB_addressselection_v1_cABC" async defer></script>
<script>
let map;
let marker;
let geocoder;
let responseDiv;
let response;
function initMap(){
map = new google.maps.Map(document.getElementById("map"), {
zoom: 8,
mapTypeControl: false,
});
geocoder = new google.maps.Geocoder();
var locationinput = document.getElementById('locationinput');
var geocodebutton = document.getElementById('geocodebutton');
response = document.createElement("pre");
response.id = "response";
response.innerText = "";
response.id = "response-container";
responsediv = document.createElement("div");
responsediv.id = "response-container";
responsediv.appendChild(response);
map.controls[google.maps.ControlPosition.LEFT_TOP].push(responsediv);
geocodebutton.addEventListener("click", () => geocode({ address: locationinput.value }));
}
function geocode(request){
geocoder
.geocode(request)
.then((result) => {
const { results } = result;
map.setCenter(results[0].geometry.location);
response.innerText = JSON.stringify(result, null, 2);
return results;
})
.catch((e) => {
alert("Geocode was not successful for the following reason: " + e);
});
}
</script>
</body>
</html>
