I am trying to display the coordinates from the input fields on a map using Google Maps API. However, I am facing an issue with passing the values to the script.
Below is the code snippet:
<input type="text" id="latitude" class="form-control" />
<input type="text" id="longitude" class="form-control"/>
<div id="myMap"></div>
<script>
var cx = document.getElementById("latitude").value;
var cy = document.getElementById("longitude").value;
function initMap() {
var location={lat : cy , lng : cx};
var map = new google.maps.Map(document.getElementById('myMap'), {
zoom: 4,
center: location
});
var marker = new google.maps.Marker({
position: location,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?
key=MY_API_KEY&callback=initMap">
</script>
The issue lies in
var location={lat : cy , lng : cx};The API key is correct, but has been omitted for security reasons.