How to Use Google Weather API in Your Web Page

0
1

There are many reasons to add Weather API to your website. 124,000,000 search queries for "Weather" are processed each month, and sometimes it relates to your business. How can you add it? How to find the one that will fit your desired area? Is there a free tool online to build it?

The answer for all this questions is Google's Weather API. Google has an API that processed information about Weather temperatures and conditions for 5 days, the recent and 4 days forward. Like all others API that Google developed, it's free.

Basically you need to be knowledgeable with HTML, CSS and PHP. The code contains the information puller (PHP), and the designer code (HTML & CSS).

The PHP part (this part will be added before the next HTML / PHP code)

<strong> <em> <? php </em> </strong> <strong> <em> $ xml = simplexml_load_file ("http://www.google.com/ig/api?weather=new-york") ; </em> </strong> // get XML file with all data <strong> <em> $ current = $ xml-> xpath ("/ xml_api_reply / weather / current_conditions"); </em> </strong> // get current temperature and condition <strong> <em> $ information = $ xml-> xpath ("/ xml_api_reply / weather / forecast_information"); </em> </strong> // get next days temperatures <strong> < em> $ forecast_list = $ xml-> xpath ("/ xml_api_reply / weather / forecast_conditions"); </em> </strong> // get next days conditions <strong>?> </strong>

This will pull all the information about the place you chose, and will be ready to be placed inside your page with PHP code.

The HTML & PHP part

<strong><em> <h1> New-York City Weather </h1> <div class = weather> <img src = "<? php echo '<a target =" _new "rel = nofollow href = http: // www.google.com> http://www.google.com </a> '. $ current [0] -> icon [' data ']?> "alt =" weather "/> <div class = condition> <strong> Today </strong> <br /> <? php echo $ current [0] -> temp_f ['data']?> ° F, <? php echo $ current [0] -> condition ['data' ]?> </div> </div> <? php foreach ($ forecast_list as $ forecast) {?> <div class = weather> <img src = "<? php echo '<a target =" _new "rel = nofollow href = http: //www.google.com> http://www.google.com </a> '. $ forecast-> icon [' data ']?> "alt =" weather "/> <div class = condition> <strong> <? php echo $ forecast-> day_of_week ['data'];?> </strong> <br /> <? php echo $ forecast-> low ['data']?> ° F – <? php echo $ forecast-> high ['data']?> ° F, <? php echo $ forecast-> condition ['data']?> </div> </div> <? php}?> </em> </strong>

This part place your data together with its own design. It is important to design it, since you will want to place it in a particular spot on the page, and to use your website color. Next you will find CSS code that I have used to create simple table of weather.

The CSS part

<strong><em><style></em> </strong> <strong> <em> .weather {width: 245px; height: 40px; background: # d7d7d7; padding: 2px; margin-bottom: 2px;} .weather img {float: left;} .weather.condition {width: 200px; height: 40px; float: right; text-align: left;} </em> </strong> <strong><em></style></em> </strong>

Source

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.