JSFiddle - React, Tailwind, and code Playground

by Ty

HTML

<!doctype html>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCvvj_OUxrZtPCzFU-qpqZjK-bOGOW6wKs&sensor=false&libraries=places&RankBy.DISTANCE"></script>
<body>
	<h1>Get all your weather data here.</h1>
		City: <input id="city"city="city" />
		<input id="submit" type="submit" />
	<br />
	<div id="map_canvas" style="width:600px; height: 400px; border: 1px solid black">
	</div>
	<script type="text/javascript" src="js/weather.js"></script>
</body>
</html>

JavaScript

//Gets weather data
function getWeather() {
	var city = $('#city').val();
	$.ajax({
		type:'get',
		url:'http://api.openweathermap.org/data/2.5/weather?units=imperial&q='+city,
		dataType: 'json',
		success: function(json) {
			drawMap(json);
		}
	});
}

//Draws Map
function drawMap(json) {
	var lat = json.coord.lat;
	var lon = json.coord.lon;
	var center = new google.maps.LatLng(lat,lon);
	var mapOptions = {
		zoom: 11,
		center: center,
	};
	var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
	var marker = new google.maps.Marker({
		position: center,
		map: map,
		title: json.weather[0].description
	});
	var infoWindow = new google.maps.InfoWindow({
		content: "<h3>Today's "+json.name+" Weather</h3>"+
				"<p>Today will be "+json.weather[0].description+" ."+
				"The temperature is "+json.main.temp+" .</p>"
	});
	google.maps.event.addListener(marker, 'click', function() {
		infoWindow.open(map,marker);
	});
}

//Gets city on button click, starts process
$(document).ready(function() {
	$('#submit').on('click', function() {
		getWeather();
	});
});