[Jouer de la musique] 

DAVID J. Malan: Bonjour. Prenons une promenade à travers Problème Set 8 Mashup, qui va vous mettre au défi de se appuyer sur des éléments de Google Maps avec des éléments de Google Nouvelles et réduire en purée ensemble dans une applet Web permet à un utilisateur de rechercher une carte des nouvelles locales aux villes spécifiques, villes et codes postaux. Pour ce faire, nous allons intégrer certains HTML, CSS, PHP, SQL, JavaScript et une technique généralement connu sous le nom AJAX afin pour créer cette immersive expérience de l'utilisateur. 

De première pour Google Maps se laisser. Ceci, bien sûr, est sans doute une interface familière. Mais il se avère que Google Maps fournit également une application de API-- interface-- programmation par l'intermédiaire duquel vous pouvez prendre des éléments de Google Maps et les intégrer dans vos propres applications. En effet, tout au long du processus, vous allez de trouver un couple d'URL particulièrement utile que sont mentionnés dans le spécification pour problème Set 8, spécifiquement ce Getting Started Ou au Guide du développeur Google Maps API version 3 ainsi que l'API Google Maps JavaScript v3 référence, qui est un peu plus obscur à lire mais a en fait tout le niveau inférieur des détails sur ce qui fonctionne ou méthodes et les objets et les propriétés et événements se fait avec l'API, très semblable dans l'esprit à [inaudible] pages. 

Maintenant, si nous prenons un coup d'oeil à Google Nouvelles, vous aurez peut-être voir une interface familière ici. Mais il se avère que vous pouvez également rechercher Google Nouvelles pour des zones géographiques spécifiques via un paramètre HTTP appelée géo. En fait, si je agrandir ici, vous verrez que Je suis à news.google.com/news/section?geo=02138. Et, en effet, si je zoome sur, vous verrez que je suis regardant une page avec tout un tas de vues sur Cambridge, Massachusetts. 

En attendant, si je ai effectivement changer la URL de ne pas être un code postal comme celui-ci, mais quelque chose d'un peu messier comme Cambridge, + Massachusetts, où le plus est la façon dont vous encodez un caractère espace dans une URL et appuyez sur Entrée, vous verrez que je ai effectivement voir presque les mêmes nouvelles. Peut-être ce est un peu différent parce Cambridge fait a plusieurs codes postaux. Maintenant, comment le saurais-je et, en fait, comment pourrais-je en quelque sorte attacher villes et villages à des codes postaux au cas où je vouloir permettre à l'utilisateur pour rechercher soit? Eh bien, il se avère qu'il ya un site Web appelé là-bas geonames.org qui est une initiative d'avoir une base de données disponible librement de tous sortes de l'information géographique, non seulement pour les États-Unis, mais aussi pour d'autres pays. En fait, si je vais à cette URL ici, ce qui est également mentionné dans le problème posé spécification, vous le verrez trois liste de tout un tas de fichiers zip ne importe lequel peut être téléchargé par vous. En fait, pour ce problème posé vous allez télécharger us.zip. Maintenant dans ce fichier, est un tout tas de données au format texte. Les fichiers est très similaire à un CSV-- Comma Separated Values ​​file-- mais il utilise en fait onglets pour délimiter les champs. Maintenant, quant à lui, si vous regardez ici ce que je ai mis en évidence, les champs de ce fichier vont être des choses comme les codes de pays, codes postaux, des noms de lieux, puis, dans une certaine forme ou d'autres, les États et comtés, communautés, et plus encore. En fait, je ai déjà téléchargé ce fichier à l'avance. Permettez-moi aller de l'avant et de l'ouvrir ici-- us.text-- et, en fait, vous aurez voir si je défiler jusqu'à la ligne 16792 vous verrez quelques enregistrements pour Cambridge, Massachusetts et ses différents codes postaux. Ce que vous voyez il ya aussi le comté, quelques chiffres que je ne ai pas vraiment comprendre, mais aussi tous le chemin sur la droite, certains GPS coordinates-- latitude et longitude. Ce est très bien parce que l'un des les fonctionnalités de Google Maps API est la capacité de détecter où vous êtes géographiquement en termes de coordonnées GPS. 

Maintenant, nous allons commencer à comprendre comment commencer lier ces choses ensemble. Nous vous avons donné ensemble tas de code de distribution, ainsi que la base de données MySQL. En fait, si je tire un phpMyAdmin ayant déjà importé, comme vous le sera bientôt, pset8.SQL, vous verrez une table MySQL ressemble à ceci, un champ ID, pays code, code postal, le nom en plus de place. Les types de toutes les personnes Je colonnes proviennent tout simplement en lisant le readme.text déposer ici que spécifié si un champ est un nombre entier, ou varchar ou similaire. 

Nous avons donc créé ce tableau pour vous et vous a donné les commandes SQL à exécuter pour créer ce table dans votre propre base de données, mais il ya en fait pas encore de données en elle. Au contraire, vous allez avoir à télécharger us.zip ou la fermeture de ne importe quel pays déposer à partir de cette URL il. Et puis vous allez avoir à écrire un script de ligne de commande en PHP qui est va ouvrir ce texte déposer, itérer sur ses lignes, et ensuite pour chacune des ces lignes font un insert qui place dans le tableau dans votre base de données MySQL. Donc, à la fin de ce processus, vous aurez ont finalement exécuter ce script juste une fois en théorie. En réalité, vous aurez probablement exécuter un tas de fois tout en essayant de corriger divers bugs. 

En fin de compte, vous allez avoir un vraiment grand base de données avec des milliers et des milliers de lignes géographiques. Ensuite, vous allez mettre que l'importation script de côté une fois que ça marche et votre base de données est agréable et correcte, puis vous allez passer à fait mise en œuvre du mashup lui-même. Le mashup va regarder un petit quelque chose comme ça. Au mashup.cs50.net, nous avoir une solution de personnel qui ressemble un peu quelque chose comme ça. En effet, si je clique sur ce journal Icône de Cambridge, Massachusetts, vous verrez une filature icone brièvement, puis une liste ordonnée, une liste à puces des articles liée à Cambridge, Massachusetts. Si je clique sur Charlestown, Massachusetts, Je vois la même chose pour cette ville. Et si je clique sur Watertown, Massachusetts, il pourrait ne pas y avoir de nouvelles du départ de Watertown, de sorte que vous verrez quelque chose comme lente jour de nouvelles. 

Maintenant, quant à lui, en haut à gauche sont certains familiers contrôles Google Maps pour vous permettre de faire un zoom arrière, poêle haut, bas, gauche et droite, mais aussi une boîte de recherche que nous y mettons. Donc, si je cherche, franchement, le seul autre code Je sais, 90 210, nous allons réellement voir Beverly Hills, en Californie. Lorsque vous cliquez dessus, il me amène à Californie et tout un tas des nouvelles à propos de Beverly Hills. Maintenant, remarquez, aussi, ce qui est arrivé. Si je cette recherche de temps pour 02 138 ou même Cambridge Massachusetts ou une virgule variante de celui-ci, vous obtenez une peu déroulant autocomplete. Maintenant cela est d'utiliser un plugin pour une bibliothèque appelée jQuery, et que plugin est appelé typeahead. Nous avons simplement lisons la documentation, téléchargé le fichier .js intégrée dans le code de distribution de sorte que vous en fin de compte peut écrire le code qui remplit ce menu déroulant avec l'auto sélections ou les suggestions d'automobiles. 

Maintenant, le code de distribution, cependant, que vous avez reçu ne fait pas autant. Vous obtenez la carte Google intégré, et vous obtenez les contrôles en haut à gauche, et vous obtenez la boîte de recherche. Mais si je tape quelque chose comme 02138, pas de lieux se trouvent encore. Donc cela va être un de nos objectifs ici. En outre, si vous prenez une étape en arrière et regarder la carte elle-même, il ya pas de nouvelles que ce soit. Même si je clique et glisser, pas de marqueurs en fait apparaître des nouvelles parce que ce défi est laissé pour vous aussi. 

Jetons un coup d'oeil, puis le code de distribution. Une fois que vous avez téléchargé pset8.zip et l'ouvrit dans votre répertoire de serveur virtuel dans le CS50 Appliance, vous verrez ces répertoires ici à l'intérieur. Bin-- qui se trouve généralement à exécutable binaire pour programs-- comprend, comme dans pset7, un peu de PHP fichiers que d'autres fichiers incluent, alors publique, qui est les fichiers qui doivent être accessibles au public à un utilisateur avec un navigateur. Jetons un coup d'oeil dans le bin, et nous allons voir qu'il ya un fichier il y avait déjà appelé Importer. Si nous ouvrons ce avec gedit, nous verrons que, malheureusement, il n'y a pas beaucoup là. Tout ce qui est là, cependant, est un tralala en haut qui précise ce qui interpreter-- dans ce cas PHP-- doit être utilisé pour effectivement exécuter ce fichier. Mais alors où il est dit TODO est où vous êtes allez avoir besoin d'écrire du code qui exige probablement la config fichier qui est dans le répertoire comprend comme nous l'avons fait auparavant avec les fichiers PHP. Et puis vous allez avoir à ouvrir en quelque sorte jusqu'à us.text que vous sans doute ont déjà décompressé. Ensuite, vous allez avoir à itérer sur les lignes de ce fichier, peut-être en utilisant une partie des fonctions suggéré dans la description. Insérez ensuite chacun de ces lignes en base de données MySQL à l'aide de la fonction d'interrogation, qui nous avons encore une fois vous fourni with-- ou au moins un variant de celui-ci dans functions.php, que nous verrons dans un instant. 

Maintenant, nous allons fermer l'importation et revenir à notre répertoire et cette fois aller dans comprend. Et si je fais ls là, vous verrez trois fichiers tout à fait comme problème Set 7. Et nous allons jeter un coup d'œil rapide, par exemple, au config.php. Dans là, est moins de lignes qu'avant, et il semble que ce fichier inclut constants.php et functions.php. Nous utilisons un peu différent technique cette fois réellement précisent que ces fichiers sont liés dans le répertoire courant __ DIR__ représente le répertoire que cette fichier config.php, est lui-même dans. Donc, ce est un plus de manière explicite de spécifier ce que d'autres fichiers que vous souhaitez exiger. 

Maintenant, si je ferme ce fichier et ouvrir constants.php place, vous verrez un fichier très réminiscent à ce ainsi, quoique problème Set 7 avec une base de données différente appelée pset8. Enfin, dans functions.php, nous verrons une seule fonction cette fois appelé requête. Ce est presque la même, sauf que nous traitons erreurs cette fois-ci un peu différemment, mais ce est l'utilisation est les mêmes que dans sept problème posé. 

Maintenant revenons à notre pset8 répertoire, allez dans publique, et il si je fais ls, vous verrez this-- articles.php, index.html, search.php, et update.php-- tous les fichiers. Et puis les polices css, img, et répertoire js tout à fait comme pset7. 

Jetons un oeil à index.html, qui est va être vraiment Point à la smashup d'entrée. Maintenant en index.html, vous verrez un tout tas d'éléments de liaison dans la tête, spécifiquement, par bootstrap pour notre propre CSS suivi par tout un tas de scripts balises pour des choses comme les cartes, API lui-même, un marqueur spécial avec étiquette utilitaire qui nous l'avons mentionné dans le spécification est disponible pour vous, jQuery lui-même, bootstrap lui-même, et une autre bibliothèque appelé soulignement qui nous parlons dans la spécification. Underscore.js comme jquery.js est une bibliothèque JavaScript qui a tout un tas de fonctionnalités que beaucoup de personnes dans le désir du monde existé dans JavaScript lui-même. Donc, tous ces éléments sont fait assez populaire. Nous avons également mentionné typeahead qui est la bibliothèque est-ce que autocomplete déroulant et enfin un lien vers notre propre JavaScript. 

Pendant ce temps, et peut-être Heureusement, ce mashup est entraîné par relativement peu HTML ici au fond. Remarquez que nous avons spécifié un div dans notre corps de liquide classe conteneur. Ce, par bootstrap de documentation, juste signifie que cette div va remplir le viewport ou la fenêtre du navigateur entièrement. 

Pendant ce temps, inférieur à celui que nous avons un div Ce est ouvert et immédiatement fermé avec l'ID unique de la carte toile. Ce est maintenant de Google La documentation des cartes pour son API, lequel je ai besoin simplement avoir un div vide dans laquelle d'injecter, finalement, un Google réels Maps. Mais plus que dans un peu. 

Enfin, il ya une forme à l'intérieur de laquelle ici met en œuvre dessus la zone de texte en haut à gauche dans notre interface pour la recherche. Notez que nous avons utilisé un peu de bootstrap ici too-- choses comme forme en ligne et la forme-groupe. Nous avons donné l'ancien ID unique de la forme. Et puis, finalement, je ai fait un type d'entrée, ce qui est assez familier, dont l'ID est q. Juste une convention. Q pour query-- pourrait avoir été appelé rien. Et puis l'espace réservé, quant à lui, est la ville, état, et le code postal que vous pourriez rappeler voir dans notre mashup démonstration plus tôt. Fermons ce fichier. 

Maintenant, jetez un oeil à des fichiers PHP que attendre et puis les fichiers JavaScript. Dans nos fichiers PHP, nous avons déjà mis en œuvre pour vous, par exemple, les mises à jour. Update.php-- nous ne dépenserons pas un énorme quantité de temps sur ici-- en bref est le fichier que notre Code JavaScript va contacter via AJAX que technique asynchrone qui est JavaScript intégré dans ces jours qui est va nous permettre de poser update.php pour plus d'informations. 

Plus précisément, à tout moment l'utilisateur fait glisser la carte ou effectue une recherche qui saute l'utilisateur vers un autre emplacement, notre code JavaScript, comme nous le verrons bientôt, est vais appeler update.php et demander 10 ou plus marqueurs à l'intérieur de la zone de visualisation sur la base sur les coordonnées GPS des parties supérieure et inférieure coins de cette carte. Nous pouvons alors repeupler la carte maintenant que l'utilisateur a déplacé l'écran afin pour voir 10 probablement nouvelle marqueurs pour différentes villes. Pendant ce temps, ce fichier est finalement va exécuter une requête SQL contre notre base de données table appelée lieux va revenir ceux 10 endroits ou moins. 

Pendant ce temps, dans articles.php, est un autre fichier que nous avons écrit dans son intégralité. Il est très similaire dans l'esprit La fonction RECHERCHE de problème Set 7, qui a contacté Yahoo Finance pour vous. Ce fichier contacts Google Actualités pour vous, finalement, l'accaparement une machine lisible version-- dans quelque chose appelé RSS format-- des nouvelles de Cambridge ou de Beverly Hills ou quelque ville que vous avez recherché pour basé sur celui géoparamètres. Nous analysons ce que RSS, qui est juste un type de langage de balisage XML appelé, puis nous avons effectivement retourner à votre navigateur et à votre code JavaScript, Plus précisément, dans un format appelé JSON, JavaScript Object Notation. Maintenant, vous verrez dans le specification-- nous vous rappelons comment vous pouvez réellement voir une partie de la back-- venue JSON en fin de compte que cette fonctionnalité permet de vous remplissez ces menus contextuels afin que lorsque vous cliquez un marqueur sur la carte vous voyez tout un tas de balles, dont chacun liens vers un article. 

Maintenant, nous allons jeter un oeil à une dernière fichier PHP qui, heureusement, ne est pas beaucoup aller on-- juste un assez grand TODO. En ce moment, ce fichier déclare un tableau appelé endroits. Et puis, finalement, gravures ce tableau en JSON format-- pretty-imprimant juste pour que les choses sont plus faciles à déboguer. Malheureusement, dans le milieu, il ya cette TODO, qui appelle pour vous de rechercher le base de données de lieux correspondant à un géo HTTP paramètre. 

Et, en effet, cela va être un de vos challenges-- pour implémenter cette fonctionnalité ici de sorte que lorsque vous contacter ce fichier avec une URL comme la recherche. php? geo = quelque chose, votre code sera finalement retourner une JSON tableau de tous les endroits dans votre table de base de données qui correspondent à cette entrée. Donc, si les types d'utilisateurs à Cambridge, votre fichier ici search.php devrait finalement retourner un tableau JSON pour tous les matchs pour Cambridge, qui pourrait être dans le Massachusetts mais pourrait être même ailleurs. 

Enfin, nous allons jeter un oeil à deux les fichiers qui sont ultimately-- statique votre fichier CSS et votre fichier JavaScript. Si je vais dans notre répertoire CSS, il ya tout un tas de fichiers là, mais la plupart d'entre eux sont des bibliothèques. Je vais jeter un oeil, spécifiquement, au styles.css, qui est notre propre CSS mondiale qui est aller à styliser toute cette mashup. Je me en remets à vous de lire à travers les commentaires ici, mais, en un mot, ce est le CSS qui assure que notre mashup, par défaut de la boîte, ressemble exactement la façon dont nous voulons it-- avec la carte de remplissage du port de vue et la recherche Box Up en haut à gauche. Nous avons également pris la liberté de styliser que typeahead déroulante Menu un peu ainsi. 

Le dossier le plus important peut-être pour ce problème définir est ce dernier, scripts.js. A l'intérieur de votre répertoire JS est encore plus de fichiers. Tous sont des fichiers de bibliothèque sauf pour celui-ci, scripts.js. Si nous ouvrons cette place, prenons notre dernière tournée à travers les fonctions sont intégrées dans ce fichier pour vous et attirent l'attention aux TODOs qui nous attendent. 

Au sommet de ce fichier, sont trois variables globales. Un pour une carte, qui va être une référence à notre carte Google. Vous pouvez penser que ce comme une sorte de pointeur. Pendant ce temps, nous avons une autre variable globale appelé d'info, qui semble être stocker la valeur de retour d'un appel à la nouvelle google.maps.InfoWindow. JavaScript prend en charge objets sont très similaires dans l'esprit Struts. Et ce que cette ligne pour nos fins est fait est la création d'une nouvelle information fenêtre dans la mémoire, puis gardant autour d'une référence celui-ci dans une variable appelée Infos. Et entre ceux qui, quant à lui, est ce qui semble être un JavaScript vide tableau appelé marqueurs. Toutes ces icônes de journaux, ou vous pourrait choisir une toute autre icône, vont être stockée en fin de compte dans ce tableau de sorte que nous pouvons très facilement ajouter à la carte et de les supprimer de la carte. 

Maintenant, nous allons faire défiler vers le bas un peu et whiz par le code qui va être exécutée dès que le DOM ou un document modèle d'objet ou de la page elle-même est prêt. Rappelons que cette syntaxe ici spécifie simplement que le code ci-dessous doit être exécuté seulement lorsque le navigateur a fini charger tout le reste. 

Nous déclarons d'abord une tas ensemble de styles, qui finissent par styliser la carte comme pour la spécification. Nous déclarons alors une toute tas d'options, qui personnaliser davantage le Google carte que nous sommes sur le point d'intégrer. Nous utilisons ensuite un peu de code jQuery, ce qui se explique dans un peu plus de détails dans la spécification, à saisir cet élément, la carte-toile que nous avons identifié de manière unique. Et puis cette ligne est ici ce qui semble nous donner magie une carte Google intérieur de notre propre application, stocker une référence à celui-ci dans cette variable appelée carte. 

Enfin, ici nous enregistrons ce est ce qu'on appelle un auditeur. Pensez façon back--, manière back-- à la semaine zéro dans CS50 lorsque nous avons examiné et Scratch son soutien à travers une marche par le biais des choses appelées événements et émissions. Vous pourriez ne pas avoir utilisé vous-même, mais ce est un mécanisme par lequel un navigateur dans ce cas peut attirer notre attention quand il est prêt à effectivement exécuter du code. Dans ce cas, il va écouter à la carte pour un événement appelé ralenti. Cela signifie que le navigateur a fini de charger la carte Google. À ce stade, une fonction appelée configure devrait finalement être exécuté. Cette fonction, configurer, nous le verrons, est écrit par nous. 

Maintenant ici est une fonction que, malheureusement, est juste un marqueur TODO add. Par la spécification. vous allez avoir besoin pour écrire le code qui fait ajoute un marker-- si il semble comme un journal, ou une punaise, ou quelque chose else-- à la carte Google. Voici maintenant que la fonction appelé configure. Je vous laisse le soin de lire grâce à cela plus en détail, mais rendons compte que nous ajoutons un tas d'autres auditeurs afin que nous puissions exécuter du code lorsque le utilisateur clique sur la carte et traîne. Nous avons également le code ici qui initialise que typeahead Plugin de sorte que la liste déroulante menu fonctionne effectivement. 

Mais concentrons-nous sur quelques- quelques endroits ici. Concrètement, cela à faire ici. Je me en remets à la ligne la documentation et la spécification pour savoir comment remplir ce TODO. Mais en un mot, cette bibliothèque typeahead vous permet de passer en ce qui généralement connu en tant que matrice, qui a des espaces réservés variables très similaire dans l'esprit à l'% de printf. * s. Mais dans ce cas, le modèle pour la spécification vous permet de spécifier les variables que vous voulez pour injecter des données qui viennent retour de quelque chose comme le PHP les fichiers que vous avez écrit qui émettent sortie JSON. 

Maintenant ici rendons compte que nous sommes l'écoute pour les sélections de typeahead lorsque l'utilisateur effectue effectivement Une recherche et sélectionne une valeur. Ce est ainsi que nous sommes en fait vais écouter pour ce et exécuter du code en conséquence. Puis nous continuons à configurer le mashup juste un peu. Et, finalement, nous appelons cette mise à jour de la fonction. Il met à jour les marqueurs sur l'écran. Plus sur cela dans un instant. Pendant ce temps, il ya quelques-uns petites fonctions ici. Dont l'un est hideInfo qui ferme simplement la bulle informative. Une autre fonction ici, qui a finalement ne sera pas trop long, supprimer des marqueurs. Cela va défaire tout votre fonction de marqueur de add fait. Et puis ici est la recherche. Et celui-ci est intéressant parce que nous ont écrit le code JavaScript qui est vais parler à search.php sur le serveur et récupérer une partie de réponse. 

Vous, bien sûr, sera toujours besoin de mettre en œuvre search.php, mais nous avons mis en œuvre le Code JavaScript qui est allez gérer effectivement l'exécution Recherches de cette zone de texte. En particulier, un avis que cette fonction ici, recherche, ne appelle search.php par une méthode appelée obtenir JSON, que nous avons vu dans la leçon. Et ici la syntaxe est un peu différent de conférence à que nous utilisons jQuery dite interface promesse. Plus sur cela dans la spécification. Cela signifie simplement pour notre Maintenant qu'il ya des fins sont deux fonctions spéciales nous besoin de faire appel à la notation par points ici immédiatement après l'appel obtenir JSON. L'un est appelé done. Un est appelé échec. Vous pouvez penser de ces comme gestionnaire de réussite et le gestionnaire d'échec juste au cas où quelque chose se passe mal. 

Maintenant, regardons à la dernière couple de fonctions de ce fichier. Ici-bas est une fonction showInfo appelé, qui affiche des informations dans un de ces petites fenêtres d'informations qui se affiche lorsque l'utilisateur clique sur un marqueur. Ici encore est que la fonction de mise à jour que nous avons mis en place pour vous. Il détermine les limites de la carte. Quelles sont les coordonnées GPS de son au nord-est et sud-ouest coins ici. Nous avons préparé quelques paramètres HDP ici et puis les passa finalement sur update.php, que nous avons également mis en place pour vous. Cela devient finalement un certain retour JSON à partir du fichier appelé update.php et supprime alors toute marqueurs sur l'écran puis parcourt les données qui reviennent de update.php, qui est de nouveau juste un tableau JSON. Et puis il ajoute finalement un marqueur pour chacun de ces endroits, Traitement de l'échec ou des erreurs qui pourraient très bien se produire. 

Maintenant, juste pour vous donner un avant-goût de la façon dont vous pourrait aller sur le débogage de ce projet, rends compte que je ai ouvert en avancer cette onglet ici pour cette URL, pset8 / articles.php? geo = 02138. Maintenant, encore une fois, des articles sur PHP nous mis en œuvre pour vous si ce ne est pas tellement ce que vous allez utiliser à déboguer, mais plutôt la technique. Remarquez que je ai cherché Zip code de Cambridge ici, et je ai obtenu en arrière, en effet, un JSON tableau de JSON objets à l'intérieur duquel sont deux keys-- lien et le titre. 

Donc cette fonctionnalité travaille déjà pour vous. Mais cette technique d'aller manuellement à une URL comme cela pour quelque chose comme search.php? geo = cambridge ou 02 138 ou quel que soit l'utilisateur a tapé dans doit avérer précieux que vous, vous-même, essayez de comprendre exactement si ou pourquoi search.php fonctionne ou pas. 

En fin de compte, puis, vous avez quelques-uns TODOs devant vous. Vous allez premiers outils ce script d'importation qui lit dans us.text dans votre base de données. Vous êtes alors allez avoir besoin à mettre en oeuvre search.php de sorte qu'il se comporte exactement comme indiqué. Vous êtes alors allez vouloir se concentrer sur scripts.js et met en œuvre définitive ces quelques TODOs, y compris pour configure et ce modèle, ajouter des marqueurs, supprimer des marqueurs, et alors durer, mais pas moins, une touche personnelle. 

Une fois que vous avez votre travail de mashup tout à fait comme le nôtre, l'objectif à portée de main est pour vous d'ajouter un personnelle toucher à votre mashup, qu'il se agisse d'esthétique ou fonctionnel. Prenez le mashup jamais si légèrement au niveau suivant. Tant que vous vous pousser au-delà votre familiarité avec la spec et ramasser une technique nouvelle, même si ce est juste quelque chose comme changer l'esthétique mise en page de la carte que vous utilisez, le champ d'application que nous attendons seront satisfaits. Ce est alors problème Set 8 Mashup. Restez à l'écoute pour plus dans le spécification et bonne chance aborder ce, votre dernier problème de réglé CS50 jamais. 

[Jouer de la musique]