I am currently working on a weather and map web application. This app will display the weather at the user's location based on their latitude and longitude, as well as show their location on a map using Google Maps. I have encountered an issue while using the Google Maps API in Codepen - it seems that it cannot be placed directly in the JS window but must be included in the HTML template between <script></script> tags.
While this is not a major problem, I need to figure out how to pass the latitude and longitude variables from the JS window to the HTML template in order to search for the location. Figuring this out has proven challenging due to the nuances of Codepen.
If you could take a look, here is the link to the Codepen:
https://codepen.io/tadm123/pen/OWojPx
Thank you for your help!
Since I am required to include code, below is a simplified version of the HTML template. Please refer to the Codepen link for the complete code snippet.
<html>
<head>
<title>Weather App</title>
</head>
<body>
<div>
<div class = "container-fluid" id="box">
<p id="country"></p>
<p id="name"></p>
<p id="weather"></p>
<p id="celsius"></p>
<p id="fahrenheit"></p>
<p id="humidity"></p>
<img src="aa" alt="Weather icon">
</div>
<h3>You are here!</h3>
<div id="map"></div>
</div>
<script>
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>