Skip to content

Instantly share code, notes, and snippets.

@stupakov
Created July 9, 2011 18:23
Show Gist options
  • Save stupakov/1073819 to your computer and use it in GitHub Desktop.
Save stupakov/1073819 to your computer and use it in GitHub Desktop.
Weather + Maps exercise.
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment