I want to show weather on my website. I looked into all the weather widgets I could find online, none of them looked as cool as the one I see on google ( when i search weather for my city ) and I could not find any documentation on how to embed it in my website.

I'd like to know if there is any way I can plugin the exact google widget in my website. (the one I see when I search for weather )

There is another option of calling the service and building the whole widget, I looked at some of the API's available and it seems like a lot of work (yahoo API returns 30 different weather states. ) This is for educational purpose and so I don't intend to spend so much time on it.

If anyone has used the google weather widget, please let me know.

I want to show weather on my website. I looked into all the weather widgets I could find online, none of them looked as cool as the one I see on google ( when i search weather for my city ) and I could not find any documentation on how to embed it in my website.

I'd like to know if there is any way I can plugin the exact google widget in my website. (the one I see when I search for weather )

There is another option of calling the service and building the whole widget, I looked at some of the API's available and it seems like a lot of work (yahoo API returns 30 different weather states. ) This is for educational purpose and so I don't intend to spend so much time on it.

If anyone has used the google weather widget, please let me know.

• javascript
• web
• widget

2 Answers 2

I was able to embed Google's weather widget, using these tricks:

• The igu=1 query parameter allows to embed google in an iframe, but without the user signed in.
• Wrap the iframe in a div to crop it to just the weather widget.
• I added a zoom-on-hover transform effect, so that the widget takes up less space on the page.

Caveats:

• Because the user cannot be signed in, the weather location may be less precise.
• The cropping offsets might be browser dependant.
• It's probably not accessibility friendly.
• It would need to be adjusted to work correctly on mobile browsers.

.google-weather-place {
    width: calc(655px/2); height: calc(450px/2);
}
.google-weather-crop {
    width: calc(655px/2); height: calc(450px/2);
    overflow: hidden;
    transition: 0.3s;
    position: absolute;
}
.google-weather-crop:hover {
    width: 655px; height: 450px;
}
.google-weather {
    position: relative;
    left: -180px; top: -180px;
    width: 2560px; height: 5120px;
    transform: scale(0.5);
    transform-origin: 180px 180px;
    transition: 0.3s;
    position: absolute;
}
.google-weather:hover {
    transform: scale(1);
    z-index: 1000;
}

<h1>Google Weather Embed</h1>
<div class="google-weather-place">
<div class="google-weather-crop">
<iframe class="google-weather" src="https://www.google./search?igu=1&amp;q=weather">
</iframe>
</div>
</div>
<p>Caveat: The google search option <code>igu=1</code> logs out the user,
so the location may be less accurate.</p>

The Google weather info box is part of the search results page and so cannot be obtained independently (AFAIK).

It is possible to extract the information from the results page. This could be done on a web server, or in the browser (JavScript or extension/plugin). It should be possible to embed the Google page into another (<iframe>), and then remove everything except for the weather data. Here's a little JavaScript to get JQuery and to hide everything except the weather box:

var script = document.createElement('script');script.src = "https://ajax.googleapis./ajax/libs/jquery/2.2.0/jquery.min.js";document.getElementsByTagName('head')[0].appendChild(script);
$('#wob_wc').show().parentsUntil('body').andSelf().siblings().hide();

These two lines can be run in the JavaScript console (tested in Firefox). The box is a little offset from the top and left page edges.

The two lines could be used as a bookmarklet (a link that runs the above line on the current page), however, I could not get it to work despite trying to wait until JQuery is loaded:

javascript:(function(){
  var script=document.createElement('script');
  script.src="https://ajax.googleapis./ajax/libs/jquery/2.2.0/jquery.min.js";
  document.getElementsByTagName('head')[0].appendChild(script);

function defer() {
    if (window.jQuery)
        method();
    else
        setTimeout(function() { defer(method) }, 50);
}

function method(){
$('#wob_wc').show().parentsUntil('body').andSelf().siblings().hide();
}

defer();
})();