simpleWeather für jQuery: Die Google Weather API ist tot. Na und?

Kein Beitragsbild

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren...

Es hätte eine temporäre Störung sein können. Nachdem sich aber den zweiten Tag in Folge die Statusmeldung “Service unavailable” hält, darf mit einiger Berechtigung davon ausgegangen werden, dass Google den Zugang zu seiner – ohnehin nie öffentlich kommunizierten – Wetter API gekappt hat. Dies erfolgte offensichtlich im Zusammenhang mit der Abkündigung iGoogles, dem erfolglosen Startseitenkonzept, das bekanntlich am 1. November 2013 endgültig den Weg alles Irdischen gehen wird. Wer die API nutzte, muss jetzt nach anderen Wegen suchen.


Yahoo! Weather: Die gibt es wenigstens noch…

iGoogle: Temporär von Weather Underground gespeist

Das Status Dashboard von AlertFox spricht eine deutliche Sprache: Googles Weather API ist von jetzt auf gleich im Orkus versunken. Zeitgleich übernahm Weather Underground die Speisung der Wetterdaten in iGoogle, gleich mit eigener Subdomain und sonstigem Komfort. Das sieht jetzt so aus:

Mit der Abschaltung der API funktionieren sämtliche Web-Dienste, sowie andere Apps, die darauf zugriffen nicht mehr. Natürlich kann man so vorgehen wie Jordan Stephens, der die Wetter-Website Currentlyin.net betrieb. Auf dessen Startseite liest man:

currentlydown : (
Google has shut down its undocumented weather API (which was used by this site).
currentlyin.net will be down for the forseeable future.

Es gibt jedoch Alternativen. Eine davon stelle ich folgend vor.

simpleWeather für jQuery und Yahoo! Weather

Yahoo! Weather ist ein veritabler Ersatz und kann zudem über die YQL API angesprochen werden. Davon macht Entwickler James Fleeting Gebrauch und liefert mit dem jQuery-Plugin simpleWeather eine Lösung, die die Wetterdaten aus dem Dienst ausliest und mittels CSS verhübscht anzeigt. Dabei ist die Basis-Variante tatsächlich simpel zu implementieren. Fleeting hat sich bei der Namensgebung offenbar ein paar Gedanken gemacht.

E-Book Effektives Online Marketing von Andreas Hecht

E-Book: Effektives Online Marketing

Entdecke die Power des perfekten Online-Marketings für deine Website. Du erfährst neue Techniken, die deine Website automatisch besser ranken lassen und die dir nach und nach einen Expertenstatus verleihen werden. [...]

So sieht der Mindestaufruf aus:

$.simpleWeather({
        location: 'wichita falls, texas',
        unit: 'f',
        success: function(weather) { ... },
        error: function(error) { ... }
});

Eine Variante, die mehr Daten aus dem Dienst abruft und integriert und dabei begrenzte Möglichkeiten bietet, deutschsprachiger zu erscheinen, sieht so aus:

$.simpleWeather({
        zipcode: '76309',
        unit: 'f',
        success: function(weather) {
                html = '

'+weather.city+', '+weather.region+' '+weather.country+'

'; html += '

Today\'s High: '+weather.high+'° '+weather.units.temp+' - Today\'s Low: '+weather.low+'° '+weather.units.temp+'

'; html += '

Current Temp: '+weather.temp+'° '+weather.units.temp+' ('+weather.tempAlt+'° C)

'; html += '

Thumbnail:

'; html += '

Wind: '+weather.wind.direction+' '+weather.wind.speed+' '+weather.units.speed+' Wind Chill: '+weather.wind.chill+'

'; html += '

Currently: '+weather.currently+' - Forecast: '+weather.forecast+'

'; html += '

'; html += '

Humidity: '+weather.humidity+' Pressure: '+weather.pressure+' Rising: '+weather.rising+' Visibility: '+weather.visibility+'

'; html += '

Heat Index: '+weather.heatindex+'">

'; html += '

Sunrise: '+weather.sunrise+' - Sunset: '+weather.sunset+'

'; html += '

Tomorrow\'s Date: '+weather.tomorrow.day+' '+weather.tomorrow.date+'
Tomorrow\'s High/Low: '+weather.tomorrow.high+'/'+weather.tomorrow.low+'
Tomorrow\'s Forecast: '+weather.tomorrow.forecast+'
Tomorrow\'s Image: '+weather.tomorrow.image+'

'; html += '

Last updated: '+weather.updated+'

'; html += '

View forecast at Yahoo! Weather

'; $("#weather").html(html); }, error: function(error) { $("#weather").html("

"+error+"

"); } });

Derzeit gibt es übrigens keine Option, direkt deutschsprachige Rückmeldungen aus Yahoo! Weather zu beziehen. Ebenso ist es nicht möglich, die mehrtägige Vorschau direkt, also außerhalb der Yahoo! Website anzuzeigen.

Möchte man seinem Wetter-Widget nun noch eine Yahoo!-ähnliche Optik verpassen, so bedarf es des folgenden CSS:

#weather {
	background: #6f9dbe;
	background: -webkit-gradient(linear, left top, left bottom, from(#adc7db), to(#6f9dbe));
	background: -moz-linear-gradient(top, #b2bcc8, #adc7db);
	width: 185px;
	margin: 0 auto;
	padding: 5px 10px;
	overflow: hidden;
	border: 1px solid #6591b3;
}
 
#weather h2 {
	color: #000;
	text-shadow: rgba(250, 250, 250, 0.6) 2px 2px 0;
}
 
#weather p {
	font-size: 25px;
	margin: 30px 0 0;
}
 
#weather p span {
	font-size: 16px;
}
 
#weather a:link, #weather a:active, #weather a:visited {
	display: block;
	clear: both;
	text-decoration: none;
	color: #222;
	font-size: 12px;
}
 
#weather a:hover {
	color: #000;
	text-decoration: underline;
}

Und das Ergebnis sähe so aus:

simpleWeather: Auch als WordPress-Plugin und mit eigenen Icons verwendbar

WordPress-Anwender können simpleWeather übrigens sehr viel bequemer nutzen. Entwickler Matt McBrien baute aus Fleetings Code ein entsprechendes Plugin, das im WordPress Plugin-Directory heruntergeladen werden kann. Natürlich funktioniert die Installation auch über das Backend, wenn Sie nach wp-simpleweather suchen.

Wem die Yahoo!-Wettersymbole nicht gefallen, der bindet schlicht eigene ein. Yahoo! verwendet rund 50 sog. Condition Codes, also Wetterlage-Bezeichnungen. Man nimmt nun ein Iconset der eigenen Wahl her und benennt die Icons korrespondierend zum Condition Code. Liefert Yahoo! beispielsweise für die abgefragte Region den Code 26, nämlich “cloudy” zurück, so würde ein entsprechend von Ihnen vorbereitetes Icon (cloudy.png) angezeigt. Der Aufruf sähe so aus:


Fazit: simpleWeather bietet nicht zuletzt durch die Möglichkeit, eigene Icons zu verwenden, eine sehr flexible Optik, die mittels CSS nahezu beliebig anpassbar ist. Zudem greift es über YQL auf Yahoo! Weather zu, das im Gegensatz zur Google Weather API alive and kicking ist.

Links zum Beitrag:

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

Sortiert nach:   neueste | älteste | beste Bewertung
ThL
Gast

Gibt’s die API auch in deutsch?

Dieter Petereit
Gast
daslicht
Gast

Gibt es mittlerweile eine Deutsche Alternative ?

wpDiscuz