Google Weather API

Every web designer has at one point or another been asked, "How can I get weather on my site?" The old answer was to have a giant ugly weather channel gadget. Something that looked very nasty and you couldn't un-brand it no matter what. Some used an iframe to display external data and have it appear to be on their site. Lastly you could always just have a link that says 'click here for weather'. My goal was to get weather data from an external source and be able to customize how it looks. Fortunately now there are some great resources out there. I'm going with one that is my favorite, something extremely easy to use and customize - Google's Weather API.

To start lets pull up the URL in your browser.,ny
You'll see XML data of the weather in New York! Easy enough, let's take a look at the output.

<weather mobile_row="0" mobile_zipped="1" module_id="0" row="0" section="0" tab_id="0">
<city data="New York, NY"/>
<postal_code data="new york,ny"/>
<latitude_e6 data=" "/>
<longitude_e6 data=" "/>
<forecast_date data="2009-08-02"/>
<current_date_time data="2009-08-02 12:19:00 +0000"/>
<unit_system data="US"/>

<condition data="Light rain">
     <temp_f data="72">
     <temp_c data="22">
     <humidity data="Humidity: 94%">
     <icon data="/ig/images/weather/mist.gif">
     <wind_condition data="Wind: N at 6 mph">     

Wow check out how easy that was. Now all we did was submit the location and hit enter. Now we have in XML weather data for that area. No advertisements and since the data is in XML we can make it look however we want. Note: I shortened the output to only one day. So what's next? Well in my case I used a PHP script to output this data. Let's take a look at that source code.
function getWeather() {
$requestAddress = "";
// Downloads weather data based on location - I used my zip code.
$xml_str = file_get_contents($requestAddress,0);
// Parses XML
$xml = new SimplexmlElement($xml_str);
// Loops XML
$count = 0;
echo '<div id="weather">';
     foreach($xml->weather as $item) {
          foreach($item->forecast_conditions as $new) {
             echo '<div class="weatherIcon">';
             echo '<img src="' . $new->icon['data'] . '"/><br/>';
             echo '</div>';
echo '</div>';


Now you have it. Your PHP file will query the XML and display the results to you. You'll notice on line 14 you create an image tag with the icon for that day. You could do more such as display other fields from the XML. In this example I just chose to display the icon. You can also change the zip code on line 3. Feel free to take this an modify it to fit your needs. I hope this tutorial was helpful! The Weather API is great on so many levels, fast, easy and customizable.

Popular posts from this blog

How to create a Chrome Extension

Connect to Gmail with Apps Script