stupakov/weather_and_maps.html

## weather_and_maps.html
<html>
<head>
    <title>Hello</title>

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        html { height: 100% }
        body { height: 100%; margin: 0px; padding: 0px }
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
</html>


<body onload="load();">

<script>
    var load = function() {
        $('#results').hide();
    };

    var getData = function() {
        var zipcode = $('#zipcode').val();

        $.ajax({
            url: 'http://query.yahooapis.com/v1/public/yql?q=select%20item%20from%20weather.forecast%20where%20location%3D%22' + zipcode + '%22&format=json'
            ,success: function(d) {
                //console.log('success ', d.query.results.channel.item);
                thedata = d.query.results.channel.item;

                $('#header').html(thedata.title);
                $('#conditions').html(thedata.description);

                weatherImage = $('#conditions').find('img')[0];
                $('body').css("background-image", "url(\"" + weatherImage.src + "\")" );
                $('body').css("background-size", "30%" );

                $('#results').show();
            }
            ,error: function(d) {
                console.log('error ', d);
                $('#results').hide();

            }
            ,dataType: 'json'
        });

        makeMap(zipcode);
    };

    function makeMap(zipcode) {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        codeAddress(zipcode); /* centers map on zip code */
    };

    function codeAddress(address) {
        geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
            } else {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
    }
</script>


<form id="zipform" action="#" onsubmit="getData()">
    Zip: <input type="text" id="zipcode">
    <input type="submit" value="submit">
</form>
<p/>
<div id="results">
    <h1 id="header"></h1>
    <p/>
    <div id="conditions"></div>
</div>
<div id="map_canvas" style="width:300px; height:200px"></div>

</body>
</html>
	<html>
	<head>
	<title>Hello</title>

	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	html { height: 100% }
	body { height: 100%; margin: 0px; padding: 0px }
	</style>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	</head>
	</html>


	<body onload="load();">

	<script>
	var load = function() {
	$('#results').hide();
	};

	var getData = function() {
	var zipcode = $('#zipcode').val();

	$.ajax({
	url: 'http://query.yahooapis.com/v1/public/yql?q=select%20item%20from%20weather.forecast%20where%20location%3D%22' + zipcode + '%22&format=json'
	,success: function(d) {
	//console.log('success ', d.query.results.channel.item);
	thedata = d.query.results.channel.item;

	$('#header').html(thedata.title);
	$('#conditions').html(thedata.description);

	weatherImage = $('#conditions').find('img')[0];
	$('body').css("background-image", "url(\"" + weatherImage.src + "\")" );
	$('body').css("background-size", "30%" );

	$('#results').show();
	}
	,error: function(d) {
	console.log('error ', d);
	$('#results').hide();

	}
	,dataType: 'json'
	});

	makeMap(zipcode);
	};

	function makeMap(zipcode) {
	geocoder = new google.maps.Geocoder();
	var latlng = new google.maps.LatLng(-34.397, 150.644);
	var myOptions = {
	zoom: 8,
	center: latlng,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

	codeAddress(zipcode); /* centers map on zip code */
	};

	function codeAddress(address) {
	geocoder.geocode( { 'address': address}, function(results, status) {
	if (status == google.maps.GeocoderStatus.OK) {
	map.setCenter(results[0].geometry.location);
	var marker = new google.maps.Marker({
	map: map,
	position: results[0].geometry.location
	});
	} else {
	alert("Geocode was not successful for the following reason: " + status);
	}
	});
	}
	</script>


	<form id="zipform" action="#" onsubmit="getData()">
	Zip: <input type="text" id="zipcode">
	<input type="submit" value="submit">
	</form>
	<p/>
	<div id="results">
	<h1 id="header"></h1>
	<p/>
	<div id="conditions"></div>
	</div>
	<div id="map_canvas" style="width:300px; height:200px"></div>

	</body>
	</html>