Widget météo Google sur mon site Web

Question

Je veux afficher la météo sur mon site Web. J'ai regardé tous les widgets météo que je pouvais trouver en ligne, aucun d'entre eux n'avait l'air aussi cool que sur google (quand je recherche la météo pour ma ville) et je n'ai trouvé aucune documentation sur comment l'intégrer dans mon site.

Je voudrais savoir s'il y a un moyen de brancher le widget google exact sur mon site. (celui que je vois quand je cherche la météo)

Il y a une autre option d'appeler le service et de construire le widget entier, j'ai regardé quelques-unes des API disponibles et cela semble beaucoup de travail (yahoo API retourne 30 états météorologiques différents.) Ceci est à des fins éducatives et donc je n'ai pas l'intention de passer autant de temps là-dessus.

Si quelqu'un a utilisé le widget météo google, s'il vous plaît faites le moi savoir.

Answer 1

Tous les résultats météorologiques de google sont stockés dans un div avec wob_wc id.

Lors d'une recherche rapide sur google pour cette identification je suis tombé sur this extension qui pourrait être en mesure de vous aider. Jetez simplement un coup d'oeil dans le results.js et voyez par vous-même comment cela fonctionne.

Answer 2

La zone d'informations météo de Google fait partie de la page des résultats de recherche et ne peut donc pas être obtenue indépendamment (AFAIK).

Il est possible d'extraire les informations de la page de résultats. Cela peut être fait sur un serveur web, ou dans le navigateur (JavScript ou extension/plugin). Il devrait être possible d'intégrer la page Google dans une autre (<iframe>), puis de tout supprimer, sauf pour les données météorologiques. Voici un petit JavaScript pour get JQuery et hide everything except la case météo:

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

Ces deux lignes peuvent être exécutées sur la console JavaScript (testé dans Firefox). La boîte est légèrement décalée par rapport aux bords de page supérieur et gauche.

Les deux lignes pourraient être utilisées comme un bookmarklet (un lien qui exécute la ligne ci-dessus sur la page en cours), mais je ne pouvais pas obtenir à travail malgré les tentatives de wait until JQuery is loaded:

javascript:(function(){ 
    var script=document.createElement('script'); 
    script.src="https://ajax.googleapis.com/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(); 
})();