[음악 연주] 

DAVID J. 마란 : 안녕하세요. 의를 통해 산책을하자 문제 세트 8 매시업, 되는 당신을 도전 할 것입니다 구글지도 요소에 따라 무승부 Google 뉴스와 매쉬의 요소와 함께 웹 애플릿로 그 사용자가 검색 할 수 있습니다 지역 뉴스에 대한지도 특정 도시에, 도시와 우편 번호. 이 작업을 수행하기 위해, 우리는에 갈거야 일부 HTML을 통합, CSS, PHP, SQL, JavaScript 및 기법 일반적으로 위해 AJAX로 알려진 이 몰입을 만들 수 있습니다 사용자 경험을 제공 할 수 있습니다. 

최초의 구글 맵 자체에 대한 보자. 물론이 경우, 아마도 친숙한 인터페이스를 제공합니다. 그러나 그것은 밝혀 Google지도 또한 API-- 애플리케이션을 제공 interface-- 프로그래밍하는 통해 Google지도의 요소를 취할 수 있습니다 과에 통합 사용자의 응용 프로그램. 사실, 전역이 프로세스, 당신은거야 두개의 URL을 찾을 수 그 특히 유용합니다 에서 언급 한 문제 세트 8 사양, 특히이 시작하기 가이드 또는 개발자 가이드 구글지도 API 버전 3도에 대한 Google지도 자바 스크립트 API로 이다 V3 참조, 읽기가 좀 더 비밀 하지만 실제로 낮은 수준의 다있다 어떤 기능이나 방법에 대한 자세한 내용 및 개체 및 속성과 이벤트는 실제로 API와 함께, 정신에 매우 유사 [들림] 페이지에. 

이제 우리는 살펴 경우 Google 뉴스에서, 당신은거야 아마 여기에 친숙한 인터페이스를 참조하십시오. 그러나 당신은 또한 검색 할 수 있습니다 밝혀 특정 지역에 대한 Google 뉴스 지리적라는 HTTP 파라미터 비아. 사실, 확대하는 경우 여기, 당신은 것을 볼 수 있습니다 나는에있어 news.google.com/news/section?geo=02138. 그리고, 참으로, 나는을 확대하는 경우 아웃, 당신은 난 것을 볼 수 있습니다 의 전체 무리가있는 페이지를보고 매사추세츠 주 캠브리지에 대한 전망을 제공합니다. 

한편, 실제로 변경하는 경우 URL이 같은 우편 번호이어야한다 하지만 조금 지저분 무엇인가 캠브리지, + 매사추세츠 등, 플러스는 방법이 어디를 인코딩 URL에 공백 문자를 입력하고 Enter 키를 누르십시오, 당신은 실제로 제가 볼 거의 같은 뉴스를 참조하십시오. 아마도 그것은 조금 다르다 캠브리지 실제로 때문에 여러 개의 우편 번호가 있습니다. 지금 내가 그걸 어떻게 알고 것이다, 사실, 어떻게 든 I 있었던 도시와 마을 넥타이 사례 I의 우편 번호에 사용자를 허용 할 하나 찾는 방법? 음, 거기에 밝혀 웹 사이트는 거기라고 geonames.org 이는 구상해야합니다 모두 무료로 사용할 데이터베이스 지리 정보의 종류, 뿐만 아니라 미국에 대한뿐만 아니라, 다른 국가뿐만 아니라. 사실, 난, 여기에이 URL로 이동하는 경우 또한 설정 문제에 언급 사양은, 당신은 세를 볼 수 있습니다 zip 파일의 전체 무리의 리스팅 이는 임의의하면에 의해 다운로드 될 수있다. 실제로,이 문제에 대해 설정된 당신은 us.zip 다운로드 할 것입니다. 이제이 파일에서, 전체입니다 텍스트 형식의 데이터의 무리. 파일은 매우 유사하다 CSV-- 쉼표로 구분 된 값 file-- 하지만 실제로 사용 탭이 필드를 구별합니다. 이제, 그 사이에, 당신은 보면 여기에 내가 강조 표시 한 것을에서, 이 파일의 필드가는거야 국가 코드 같은 것들이어야합니다, 우편 번호, 장소 이름, 다음, 어떤 형태로 또는 다른 주와 카운티, 지역 사회, 그리고 더. 사실, 난 이미했습니다 사전에이 파일을 다운로드. 내가 가서하자 이곳에 엽니 다 실제로, 당신은거야, us.text--과 나는 16,792 라인 아래로 스크롤 있는지 당신은, 캠브리지에 대한 몇 가지 기록을 볼 수 있습니다 매사 추세 츠와 다양한 우편 번호. 당신이도를 참조하면, 카운티입니다 정말하지 않는 일부 번호 또한 모든 이해하지만, 오른쪽의 방법, 일부 GPS는 좌표들을 위도와 경도. 이것은 대단한 중 하나 때문에 구글지도 API의 기능 탐지 할 수있는 능력을 가진다는 것이다 당신은 지리적으로 어디에 GPS 좌표 환산. 

이제 방법을 알아 내기 위해 시작합시다 함께이 일을 묶는 시작합니다. 우리는 당신에게 전부를 준 유통 코드의 무리, 뿐만 아니라 MySQL 데이터베이스로. 내가 당기면 사실, phpMyAdmin을가 갖는 이미 수입, 곧 바와 같이, pset8.SQL, 당신은 MySQL의 테이블을 볼 수 있습니다 그 이처럼 보이는 ID 필드, 국가 코드, 우편 번호, 지명 등이 있습니다. 이러한 모든 유형의 열이 나는 단순히 유도 readme.text을 읽어 지정된 것을 여기에 파일을 필드가 정수인지, 또는 VARCHAR 등을들 수있다. 

그래서 우리는 테이블을 만들었습니다 당신은 당신에게 SQL 명령을 주어 그 생성 실행하기 자신의 데이터베이스에 테이블, 하지만 아직 사실에 데이터가 없습니다. 오히려, 당신이해야 돼요 us.zip 다운로드하거나 국가의 우편 번호 거기에 그 URL에서 파일. 그리고 당신은 작성해야 할거야 의 PHP의 명령 줄 스크립트 텍스트를 열어가는 , 파일의 라인을 반복, 다음 각각에 대한 그 라인은 삽입을 할 그 테이블을 배치에 MySQL 데이터베이스에. 이 프로세스의 마지막에는 것일 정도로 궁극적으로 해당 스크립트를 실행 한 한 번만 이론. 현실에서 당신은 아마거야 그것을 배의 무리를 실행 동안 다양한 버그를 해결하기 위해 노력. 

궁극적으로, 당신은이 겁니다 수천 정말 큰 데이터베이스 지리적 행의 수천. 그럼 당신은 그 수입을 넣어거야 스크립트는 옆에 작동 된 후에는 당신의 데이터베이스가 좋은 정정 한 다음 실제로로 이동거야 매시업 자체를 구현. 매시업 보일 것입니다 이 같은 작은 선물. mashup.cs50.net에서, 우리 직원 솔루션을 즉,이 같은 작은 선물을 보인다. 사실, 나는이 신문 클릭하면 캠브리지, 매사 추세 츠의 아이콘, 당신은 회전을 볼 수 있습니다 잠시 후 아이콘 정렬 된 목록, 기사 글 머리 기호 목록 매사추세츠 주 캠브리지에 관련. 나는 찰스를 클릭하면, 매사 추세 츠, 그 마을에 대해 동일한을 볼 수 있습니다. 그리고 클릭하면 워터 타운, 매사추세츠, 어떤이되지 않을 수도 있습니다 워터 타운에서의 뉴스, 그래서 당신이 뭔가를 볼 수 있습니다 느린 뉴스 일 등을들 수있다. 

이제, 그 사이에, 왼쪽 상단에 있습니다 일부 친숙한 Google지도 컨트롤 , 팬 여러분이 축소리스 위, 아래, 왼쪽 및 오른쪽, 뿐만 아니라, 우리가 거​​기에 넣어 검색 상자. 그래서 솔직히, 검색하는 경우, 내가 알고있는 유일한 우편 번호, 90210, 우리가 실제로 볼 수 있습니다 비벌리 힐스, 캘리포니아. 클릭하면이 날 리드 캘리포니아와 왕창 비벌리 힐스에 대한 뉴스. 지금이 무슨 일이 있었는지도 알 수 있습니다. 심지어 02,138 나에 대해 내가 만약이 시간 검색 캠브리지 쉼표 매사추세츠 또는 일부 그 변형이, 당신은 얻을 작은 자동 완성 드롭. 지금이 플러그인을 사용하고 있습니다 jQuery를 호출 라이브러리, 그 플러그인은 선행 입력이라고합니다. 우리는 단순히 통해 읽기 문서, 의 .js 통합 파일하여 다운로드 한 배포 코드로 그래서 그 궁극적으로 코드를 작성할 수 있습니다 자동으로 해당 드롭 다운 메뉴를 채 웁니다 선택 또는 자동 제안. 

이제 분배 코드,하지만, 그 당신은 거의 많이하지 않습니다 받았다. 당신은 구글 맵이 포함 된 얻고, 당신은 상단 왼쪽 컨트롤을 얻을 당신은 검색 상자를 얻을. 하지만 내가 좋아하는 뭔가를 입력하는 경우 02138는, 어떤 곳은 아직 발견되지 않습니다. 그래서 될 것 여기에 우리의 목표 중 하나. 또한, 당신은 조치를 취할 경우 다시 맵 자체를 보면, 어떠한 뉴스가 없습니다. 내가 클릭해도과 드래그, 실제로 더 마커 그 때문에 뉴스에 대해 표시 문제는 당신을 위해뿐만 아니라 남아 있습니다. 

의는 다음을 살펴 보자 배포 코드에서. 당신은 다운로드하면 pset8.zip는 그것을 압축 해제 당신의 가상 호스트 디렉토리에 CS50 어플라이언스에, 당신은이를 볼 수 있습니다 여기에 내부 디렉토리. 일반적으로 약자 Bin-- 실행 programs-- 바이너리 pset7 같이 포함 일부 PHP 다른 파일을 포함하는 파일, 이다 다음 공개, 필요한 파일 공개적으로 액세스 할 수 사용자가 브라우저에. 의는의를 살펴 보자 bin 디렉토리, 우리는거야 파일이 있다는 것을 참조 이미 가져 오기가했다. 우리가 gedit에서이 작업을 열면, 우리는 볼 수 있습니다 즉, 불행하게도, 많은이 아니다 가. 하지만,이 모든 것은, 상단에있는 오두막입니다 를 지정하는 이 경우 interpreter-- PHP-- 실제로에 사용되어야한다 이 파일을 실행합니다. 그러나 그것은 말한다 곳 당신이있어 어디 TODO입니다 일부 코드를 작성해야 할 것 그 아마 설정이 필요합니다 이 디렉토리를 포함에서의 파일 우리는 PHP 파일을 해본 적이있다. 그리고 당신은 갈거야 어떻게 든 개방해야 us.text하는 당신에게 아마도 이미 푼. 그런 다음에 할 겁니다 해당 파일의 라인을 반복, 아마도 일부 기능을 사용하여 명세서에 제안했다. 그리고 그 각각 삽입 MySQL 데이터베이스에 선 조회 함수를 사용하여 어떤 우리는 다시 거라도을 제공 한 또는 적어도 변이체 그 functions.php에서, 이는 우리가 순간에 볼 수 있습니다. 

이제 가져 오기를 닫고 다시 가자 우리의 디렉토리와이 시간에 이동 이 포함되어 있습니다. 내가 거기에 LS 할 경우, 당신은 볼 수 확실히 문제 세트 (7) 등 세 개의 파일. 그리고 이제 잠깐 살펴 보자, 예를 들어, config.php 파일에서. 거기에, 적은 라인이다 보다 전에, 그것을 이 파일이 포함 보인다 constants.php 및 functions.php. 우리는 약간 다른를 사용하는 기술 사실에 이번에 이 파일이 상대 지정 현재 디렉토리에 __ DIR__ 나타내는 어떤 디렉토리이 파일의 config.php, 자체입니다. 그래서이 더있다 지정의 명시 적 방법 당신이 필요로 할 다른 어떤 파일. 

지금은이 파일을 닫은 경우 대신 constants.php을 열어, 당신은 매우 연상의 파일을 볼 수있을 것입니다 에 문제 설정 7의뿐만 아니라,이기는하지만 pset8라는 다른 데이터베이스와. 마지막으로, functions.php에서, 우리는 단지 하나의 함수를 볼 수 있습니다 쿼리이라는 시간. 이것은 우리가 처리를 제외하고 거의 동일 조금 주위에 오류가이 시간을 다르게,하지만 사용법은이다 문제에서와 같은 일곱을 설정합니다. 

이제 우리의 pset8로 다시 가자 디렉토리는, 대중에 가서, 거기에 내가 LS을 할 경우, 당신은이 겁니다 볼 수 있습니다 articles.php, index.html을, search.php, 모든 파일을 update.php--. 그리고 CSS 글꼴, IMG, 그리고 아주 pset7 같은 JS 디렉토리. 

이제 살펴 보자 이다 index.html을, 정말 될 것 smashup에 진입 점. 이제 index.html을, 당신은 전체를 볼 수 있습니다 머리에 링크 요소의 무리, 특히, 우리 자신에 대한 부트 스트랩 스크립트의 전체 무리 다음 CSS 지도 API와 같은 것들에 대한 태그 자체 레이블이있는 특수 마커 우리가 언급 유틸리티 사양은, 당신이 사용할 수 있습니다 jQuery를 자체 부트 스트랩 자체, 또 다른 라이브러리 라는 밑줄하는 우리는 스펙에 대한 이야기​​. jquery.js 같은 Underscore.js 자바 스크립트 라이브러리입니다 그 기능의 전체 무리가 그 세계의 소원에 많은 사람들이 자바 스크립트 자체가 존재했다. 따라서 이들 모두는 사실은 꽤 인기. 우리는 또한 선행 입력 언급 한 라이브러리는 것을 않는 자동 완성 드롭 다운 및 마지막으로 우리 자신의 자바 스크립트에 대한 링크. 

한편, 아마도 다행히도,이 매시업 비교적 작은 의해 구동되고 여기 아래 하단에 HTML. 우리는 사업부에서를 지정한 공지 사항 클래스 컨테이너 유체의 우리 몸. 이 당 부트 스트랩의 문서, 단지 이 사업부는 채우기 위하여려고하고 있다는 것을 의미한다 뷰포트 또는 완전히 브라우저의 창. 

한편, 아래에 우리는 사업부가 그 열 즉시 폐쇄 것 지도 캔버스의 고유 ID와. 이제이 구글에서입니다 지도 문서 그 API에 대한함으로써 단순히 필요 , 주입에 빈 DIV가 궁극적으로, 실제 구글지도. 그러나 조금의 해당에 대한 자세한. 

마지막으로, 형태가있다 여기에 내부에있는 텍스트 상자 위로는 왼쪽 상단 구현합니다 검색을위한 우리의 인터페이스. 우리가 사용했던 공지 사항 부트 스트랩의 비트 여기에 같은 일을 너무 ... 폼 인라인 및 폼 그룹. 우리는 전자를 준 형태의 고유 ID입니다. 그리고, 궁극적으로, 사실이 매우 익숙한 입력 타입, q는 누구의 ID입니다. 그냥 대회. query--가 가질 수에 대한 Q 아무것도 불려. 그리고 자리, 한편, 도시, 주이며, 우편 번호를 당신은 기억 할 수있는 데모 이전에 우리의 매시업에보고. 자,이 파일을 닫습니다 보자. 

이제 PHP 파일을 살펴 그 기다리고 다음 자바 스크립트 파일. 우리의 PHP 파일에서, 우리는했습니다 이미 당신을 위해 구현, 예를 들어, 업데이트. 우리는 거대한 지출하지 않습니다 Update.php-- 요컨대들을 이곳에 시간의 양 파일은 우리의를 자바 스크립트 코드는 것입니다 AJAX를 통해 연락하는 그 의 비동기 기술 의 그 요즘 자바 스크립트에 내장 우리가 update.php 요청 할 수 있도록 진행 더 많은 정보를 얻을 수 있습니다. 

특히, 언제 사용자는 맵을 드래그 또는 점프 검색을 수행 사용자를 다른 위치로, 우리의 자바 스크립트 코드, 우리가 곧 보 겠지만,이다 update.php 호출하는 것 10 정도 마커를 요청 뷰포트 내에 GPS 좌표에 상하의 그지도의 코너. 우리는 지금 그지도를 다시 채울 수 있습니다 사용자는 순서를 화면 이동 10 아마 새로운 볼 수 있습니다 다른 도시에 대한 마커. 한편,이 파일은 궁극적으로 SQL 쿼리를 실행하는 것 우리의 데이터베이스에 대해 테이블이라고하는 장소 사람들을 반환하는 것입니다 10 개 이하의 위치. 

한편 articles.php, 또 다른이다 우리는 전체에 작성한 파일. 그것은 정신에 매우 유사하다 문제 세트 7의 LOOKUP 함수, 이는 당신을 위해 야후 금융을 연락했다. 이 파일 연락처 Google 뉴스 당신을 위해, 궁극적으로 잡아 머신 판독 version-- 뭔가 뉴스의 RSS format--라고 캠브리지 또는 비벌리 힐스에 대한 또는 어떤 마을 당신이 검색 한 에 대한 그 geoparameter에 따라. 우리는 단지입니다 RSS를 구문 분석 XML이라는 마크 업 언어의 유형, 그리고 우리 실제로 브라우저에 반환 그리고 자바 스크립트 코드에, 구체적으로는, 포맷이라고 JSON, 자바 스크립트 객체 표기법. 지금 당신은에서 볼 수 있습니다 specification-- 우리는 당신을 가리 킵니다 당신이 실제로 볼 수있는 방법에 대해 JSON 오는 다시 -의 일부 그이 기능 궁극적으로 그렇게 그 팝업 메뉴를 채 웁니다 클릭 할 때 맵 마커에 실제로 전체 무리를 참조 글 머리 기호, 각각의 기사에 대한 링크. 

이제 마지막으로 살펴 보자 다행히하지 않는 PHP 파일 많은이을을 입어 가고 그냥 꽤 큰 TODO. 지금이 파일 선언 배열은 장소를했다. 그리고 궁극적으로 인쇄 JSON의 format--에 해당 배열 단지 있도록 예쁜 - 인쇄 일이 쉽게 디버그. 불행하게도,에 중간이 TODO가, 당신이 검색하는 이는 호출 일치하는 장소에 대한 데이터베이스 지리적 HTTP 매개 변수입니다. 

그리고, 참으로,이 것입니다 당신의 challenges-- 중 하나가 될 수 여기에서이 기능을 구현 그래서 당신은이 파일을 문의 할 때 검색 같은 URL. PHP는? 지리적 = 무엇인가, 코드는 궁극적으로 JSON을 반환합니다 에있는 모든 장소의 배열하여 그 입력과 일치 데이터베이스 테이블. 캠브리지에서 사용자 유형의 경우 그래서 여기에 파일 search.php 궁극적으로 JSON 배열을 반환해야 캠브리지의 경기 모두를위한, 매사 추세 츠에있을 수있는 그러나 심지어 다른 곳이 될 수 있습니다. 

마지막의 두 가지로 살펴 보자 정적 ultimately--있는 파일 CSS 파일과 자바 스크립트 파일. 나는 우리의 CSS 디렉토리로 이동하는 경우, 파일의 전체 무리, 거기에있다 하지만 그들 중 대부분은 라이브러리입니다. 나는 살펴거야, 특히, styles.css가에서, 어떤의 우리 자신의 글로벌 CSS입니다 이 모든 매쉬업 스타일 화 예정. 당신은을 통해 읽기에 난 떠날거야 코멘트 여기에 있지만, 간단히 말해서, 이 보장 CSS 우리의 매시업, 상자 밖으로 기본적으로, 우리 굳이 정확히 원하는대로 표시 뷰 포트를 작성지도 및 검색 왼쪽 상단에 최대 상자. 우리는 또한의 자유를 촬영했습니다 그 선행 입력 드롭 다운을 stylizing 메뉴 조금뿐만 아니라. 

가장 중요한 파일 아마 설정이 문제에 대한 이 마지막, scripts.js입니다. 당신의 JS 디렉토리의 내부 더 많은 파일입니다. 그들 모두는 라이브러리 파일입니다 이 하나를 제외하고, scripts.js. 우리는이를 열 경우의가 보자 우리의 기능을 통해 최종 투어 그 이 파일에 내장되어 당신과 통화 관심 앞에 놓여 수행 할 작업에. 

이 파일의 상단에, 세 개의 전역 변수입니다. 에가는지도에 대한 하나의 우리의 구글 맵에 대한 참조. 당신은 생각할 수 종류의 포인터. 한편, 우리는이 다른 글로벌 변수 것으로 보인다라는 정보, 호출의 리턴 값을 기억 새로운 google.maps.InfoWindow에. 자바 스크립트 객체를 지원하는 스트럿츠 정신은 매우 유사하다. 그리고 무엇이 라인 우리의 목적은하고있다 새로운 정보를 만드는 것입니다 다음 메모리와 창 참조 주위에 유지 정보라는 변수에 그에. 그리고 그 사이에, 한편, 나타나는 것입니다 빈 자바 스크립트이어야합니다 배열은 마커를했다. 그 신문의 모든 아이콘, 또는 모두 다른 아이콘을 선택할 수 있습니다, 저장 될거야 궁극적으로이 배열의 우리는 아주 쉽게 추가 할 수 있도록 지도와지도에서 제거. 

이제 아래로 스크롤 할 수 조금과 재능 될 것 코드를 통해 DOM 또는 문서로 즉시 실행 개체 모델 또는 페이지 자체가 준비가되어 있습니다. 이 구문 리콜 여기에 단순히 지정 다음 코드 그 만 실행해야 브라우저가 완료되면 다른 모든로드. 

우리는 먼저 선언 스타일의 전체 무리, stylizing을 종료하는 사양에 따라지도. 우리는 다음을 선언 옵션의 전체 무리, 또한 구글을 사용자 정의하는 우리가 포함 것을 대략지도. 우리는 그 다음 jQuery 코드의 비트를 사용 이는 좀 더 상세하게 설명한다 사양에 잡아합니다 해당 요소,지도 캔버스 우리는 그렇게 고유하게 식별있다. 그리고이 줄은 여기 무엇 보인다 마술처럼 우리에게주는 내부 구글지도 우리의 응용 프로그램, 참조 이와 저장 그 변수라는 맵. 

마지막으로, 아래로 여기에 우리가 등록 무슨 일이 리스너라고. 다시 - 방법, 방법을 생각 CS50에 주 제로에 다시 - 우리는 스크래치에서 보았을 때와 산책을 통해 지원 라는 것들에 대한 통해 이벤트 및 방송. 당신은 사용하지 않았을 수 있습니다 스스로,하지만 그건 메커니즘된다 이 경우 브라우저 그것의 때 우리의주의를 얻을 수 있습니다 실제로 코드를 실행할 준비가. 이 경우, 듣는 것 유휴라는 이벤트에 대한지도에. 이것은 브라우저가 있음을 의미 구글 맵로드 완료. 이 시점에서 함수가 호출 구성해야 궁극적으로 실행. 즉, 기능, 구성, 우리는 우리가 기록됩니다 볼 수 있습니다. 

지금 여기로 기능입니다 즉, 불행하게도, 단지 TODO의 추가 마커입니다. 사양 당. 당신이 필요 해요 실제로 코드를 작성하는 보이는 여부를 marker-- 추가 신문, 또는 엄지 압정처럼, 또는 뭔가가 구글 맵에 걸 가져 오세요. 여기에 지금 기능입니다 구성했다. 당신이 읽을 수에 난 떠날거야 자세한 내용이 통해, 하지만 우리는 추가하는 것이 실현 무리 더 리스너 때 우리는 코드를 실행할 수 있도록 사용자에 클릭하고지도를 드래그. 우리는 또한 여기에 코드를 그 선행 입력 플러그인을 초기화 그래서 드롭 다운 메뉴가 실제로 작동합니다. 

그러나 단지에 집중하자 여기에 장소의 커플. 특히이 여기에해야 할 일. 나는 온라인으로 연기하기 설명서 및 사양 에 대한 방법이 TODO를 입력합니다. 그러나 간단히 말해서,이 라이브러리 선행 입력하면 통과 할 수 있습니다 일반적으로 템플릿으로 알려진 곳에서, 일부 변수 자리를 갖고있는 의 printf의 %에 정신 매우 유사. *의. 그러나이 경우, 사양에 따라 템플릿 당신이 지정할 수 있습니다 어떤 변수 당신이 원하는 왔다 데이터로부터 주입 다시 PHP 같은에서 당신이 작성한 파일 즉, JSON 출력을 방출한다. 

이제 여기까지 우리가 실현 선행 입력 선택을 대기 언제 사용자가 실제로 행하는 검색 값을 선택합니다. 이것은 우리가 실제로는거야? 그 수신 것 그 결과 일부 코드를 실행한다. 그럼 우리가 구성하는 계속 매시업은 조금. 그리고, 궁극적으로, 우리는 전화 이 기능 업데이트. 그것은 화면에 마커를 업데이트합니다. 단지 순간에 그에 대한 자세한. 한편, 몇 가지있다 여기에 작은 기능. 중 하나 인 hideInfo 단순히 InfoWindow를 닫습니다. 여기에 또 다른 기능, 궁극적으로 너무 오래되지 않습니다, 마커를 제거합니다. 즉 취소 것 무엇이든 추가 기능 마커 기능을 수행합니다. 그리고 아래로 여기에 검색입니다. 그리고이 사람은 재미있다 우리 때문에 의 자바 스크립트 코드를 작성했습니다 에 search.php에 이야기 할 것 서버 및 일부 응답을 얻을. 

당신은, 물론, 여전히 것 sea​​rch.php를 구현해야, 그러나 우리가 구현 한 의 자바 스크립트 코드 수행 실제로 처리 할 것 텍스트 상자에서 검색합니다. 특히, 고지에서 그 여기에이 기능을 검색, search.php를 호출 않습니다 라는 방법으로 우리는 강의에서 본 JSON을 얻을. 그리고 여기 구문 약간 다릅니다 점에서 강의에서 우리가 사용하는 jQuery를 약속 인터페이스 소위. 사양에서 해당에 대한 자세한. 이것은 전자 수단 지금이 목적 두 가지 특별한 기능은 우리 점 표기법으로 호출 할 필요가 여기에 바로 JSON을 얻을 호출 한 후. 하나는 완료라고합니다. 라고 하나는 실패합니다. 당신이 생각할 수 성공 핸들러로 및 장애 처리기 단지 경우에 뭔가 잘못. 

이제 마지막으로 살펴 보자 이 파일의 기능을 몇 가지. 여기있는 기능입니다 호출은 showInfo, 어떤 그 중 하나의 정보를 보여줍니다 작은 정보창이 사용자가 마커를 클릭하면 나타납니다. 아래로 여기 더있다 해당 업데이트 기능 것을 우리는 당신을 위해 시행하고있다. 이지도의 범위를 결정한다. 의 GPS 좌표 무엇입니까의 동북 여기 남서 코너. 우리는 일부 HDP 매개 변수를 준비했습니다 여기에 다음 궁극적으로 그들을 전달 우리가했습니다하는 update.php하기 또한 구현. 즉 궁극적으로 일부 JSON을 돌아 오기 파일이 update.php이라고에서 다음 중 하나를 제거 화면에 마커 다음을 통해 반복을 다시왔다 데이터 update.php에서하는 다시 그냥 JSON 배열입니다. 그리고, 그것은 궁극적으로 마커를 추가 그 장소의 각 처리 실패 또는 어떤 오류에 아주 잘 일어난다. 

이제 당신에게 방법의 맛을 제공합니다 이 프로젝트를 디버깅에 대한 갈 수도, 나는에 연 실현 이 URL 여기에이 탭을 진행, pset8 / articles.php? 지리적 = 02138. 대한 지금, 다시, 기사 PHP는 우리는 당신을 위해 구현 이거 너무 많이하지 않습니다 당신이 사용하고있을 것입니다 무엇 디버그 오히려 기술에 관한 것이다. 내가 검색 한 공지 사항 여기 캠브리지의 우편 번호, 내가 JSON, 참으로, 다시 들어 왔 JSON의 배열은 내부 객체 두 keys-- 링크와 제목이다. 

그래서이 기능 당신을 위해 이미 작동합니다. 그러나 수동의이 기술은 가고 뭔가에 대해이 같은 URL에 같은 sea​​rch.php? 지리적 = 캠브리지 또는 02138 또는 사용자는한다에 입력 한대로 당신이 자신을 시도로서 매우 유용합니다 알아낼 정확​​히 여부 이유 sea​​rch.php가 작동되지 않았거나. 

결국 다음, 당신은 앞서 몇 왜 그렇게. 먼저 구현에 갈거야 그 수입 스크립트입니다 데이터베이스에 us.text에서 읽습니다. 그런 다음 필요 해요 sea​​rch.php을 구현하는 지정된대로 정확히 작동되도록. 그런 다음 원하는거야 scripts.js에 초점을 궁극적으로 구현 왜 그렇게들 부부, 구성을 위해 포함 그 템플릿, , 마커를 추가 마커를 제거하고, 다음 마지막으로,하지만 적어도, 하나 개인 터치. 

당신은 당신의 매시업이 작동하게되면 손에 아주 우리와 같은, 목표 당신이 개인을 추가 할 수있다 매시업에 터치 그것은 미적 또는 기능의 여부. 아무리 매시업을 가지고 약간 다음 단계로. 그래서 당신이 넘어 자신을 밀어로 스펙 자체에 친숙 하나의 기술을 데리러 새로운,이 경우에도 단지 뭔가 변화처럼 미적 당신이 사용하고있는지도의 레이아웃, 우리가 기대 범위 만족하실 것입니다. 그 다음 문제 세트 8 매쉬업입니다. 에 더 지켜봐 주시기 바랍니다 사양과 행운을 빕니다 이 태클, 마지막 CS50 문제는 지금까지 설정합니다. 

[음악 연주]