Write json, PHP, JAVASCRITP programming jobs Google Places API

Write json, PHP, JAVASCRITP programming jobs Google Places API
Travel and entertainment Search Server-side Scripting
1. Objectives
Get experience with the PHP programming language;
Get experience with the Google Places API;
Get experience using JSON parsers in PHP and JavaScript.
2. Description
In this exercise, you is asked to the Create a webpage that allows your to search for places
Information using the Google Places API, and the results would be a displayed in a tabular format.
The page would also provide reviews and photos for the selected place.
2.1. Description of the Search Form
A user first opens a page, called place.php (or any valid Web page name). You should use the ipapi.com
HTTP API (see hint 3.3) to fetch the user's geolocation, after which the search button
should be enabled (it was initially greyed out and disabled when the page loads). The user must
Enter a keyword and choose what Category of place he/she wants to search (categories include a
Cafe, bakery, restaurant, beauty salon, casino, movie theater, lodging, airport, train station,
Subway station, bus station) from a drop-down list. The default value for the "Category" dropdown
List is ' default ', which covers all of the ' types ' provided by the Google Places API. Also,
The user can choose the distance (in miles), which are the radius for the search where the center is
' Here ' (the current location, returned from Ip-api.com HTTP API) or the location listed in the edit
Box. When the ' Here ' radio button is selected, the location of the edit box must be disabled. When the
Location edit box is selected, it's a required field, and a location string must be entered. The
Default distance is ten miles from the chosen location. Use HTML5 ' placeholder ' to show the
String "Location" at the location edit box and "Ten" in the Distance edit box as the initial values.
An example was shown in Figure 1.
Figure 1 (a): Initial Search screen (search button disabled)
2
Figure 1 (b): Search screens (after fetched location)
The search form has both buttons:
? Search button:the button must be disabled and the page is fetching the user ' s
Geolocation and must are enabled once the geolocation is obtained. An example of valid
Input is shown in Figure 2. Once the user has provided valid input, your client script should
Send a request to your Web server script place.php with the form inputs. can use either
GET or POST to transfer the form data to the Web server script. The PHP script would retrieve
The form inputs, reformat it to the syntax of the APIs and send it to the Google Places API
Nearby Search service. If the user clicks on the search button without providing a value in
The "Keyword" field or "location" of the edit box, you should show a error "tooltip" that
Indicates which field is missing. Examples is shown in Figure 3a and 3b.
? Clear Button:this button must clear the result area (below the search area) and set all fields
To the default values in the search area. The clear operation must be-done using a JavaScript
function.
Figure 2:an Example of valid Search
3
Figure 3 (a): An Example of Invalid Search (empty input)
Figure 3 (b): A Example of Invalid Search (empty location)
2.2 Displaying Places Results Table
In this section, we outline the form inputs to construct HTTP requests to the Google
Places API Service and display the result in the Web page.
The Google Places API is documented here:
If the location of edit box is selected, the PHP script (i.e, place.php) uses the input address to get
The geocoding via Google Maps geocoding API. The Google Maps Geocoding API is
Documented here:
The Google Maps Geocoding API expects the parameters:
4
? Address:the Street address want to GeoCode, in the format used by the national
Postal Service of the country concerned. Additional address elements such as business
Names and unit, suite or floor numbers should is avoided.
? Key:your application ' s API key. This key identifies your application for purposes of quota
Management. (explained in section 3.1)
An example of a HTTP request to the Google Maps Geocoding APIs, when the address
Is "University of Southern California, CA" is shown below:
Uthern+california+ca&key=your_api_key
The response includes the latitude and longitude of the address. Figure 4 shows an example of
The JSON object returned in the Google Maps Geocoding API Web service response.
The latitude and longitude of the address, combined with other input information, is needed
When constructing a RESTful Web service URLs to retrieve all entities matching the user query,
Using the Google Places API "Nearby Search" service, documented here:
The Google Places API Nearby Search Service expects the following parameters:
? Key:your application ' s API key. This key identifies your application for purposes of quota
Management.
? Location:the geo-location around which to retrieve place information. The geo-location is
specified by latitude and longitude values.
? Radius:defines the distance (in meters) within which to return place results. The maximum
Allowed radius is 50,000 meters. Note that you need to translate miles to meters for a correct
Value.
? Type:filtering the results to places matching the specified type. One type May
Specified (if more than one type was provided, all types following the first entry is ignored).
? Keyword:a matched against all content the Google has indexed
including limited to name, type, and address, as well as customer reviews and other
Third-party content.
An example of a HTTP request to the Google Places API Nearby Search This searches for the
Nearby cafés near the University of Southern California within a ten miles radius is shown below:
https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=34.0223
519,-118.285117&radius=16090&type=cafe&keyword=usc&key= Your_api_key
5
Figure 5 shows a example of the JSON response returned by the Google Places API Nearby
Search Web Service Response. See the documentation in "Search responses" at the bottom of the
Place Search sections in the Google Places API Developer ' s Guide at:
Https://developers.google.com/places/web-service/search
For the details of the output format returned in search responses.
Figure 4:a Sample result of Google Maps Geocoding query
6
Figure 5:a Sample result of Google Places Nearby Search Query
The PHP script (i.e, place.php) should pass the returned JSON object to the client side, or parse
The returned JSON and extract useful fields and pass these fields to the client side in JSON
Format. You should use JavaScript to parse the JSON object and display the results in a tabular
Format. A sample output is shown inch Figure 6. The displayed table includes three columns:
Category icon, place Name, and place Address. If The API service returns an empty result set, the
Page should display "No Records has been found" as shown in Figure 7.
Figure 6:an Example of a Valid Search result
7
Figure 7:an Example of an Empty Search result
When the search result contains at least one record, you need to map the data extracted from the
API result to render the HTML result table as described in Table 1.
HTML Table Column API Service response
Category the value of the "icon" attribute that's part of
The "Results" object.
Name the value of the "name" attribute that's part of
The "Results" object.
Address the value of the "vicinity" attribute that's part
of the "Results" object.
Table 1:mapping The result from Graph API into HTML table
2.3 Displaying Place Details (reviews and Photos)
The search result table, if the user clicks on the name of a place, the page should request the
Place details using the Google Places API ' Place details ', documented at:
Https://developers.google.com/places/web-service/details
To retrieve reviews and photo references (used to retrieve photos) on the selected place. As
Required by Google, this must is done using a server PHP script (i.e., place.php). The request
Needs parameters (output should be JSON):
? Place_id:an ID returned as result of the Google Places API nearby Search service
? Key:your application ' s API key. This key identifies your application for purposes of quota
Management.
An example of a HTTP request to the Google Places API Place Details is shown below:
Figure 8 (a) shows a sample response.
8
Figure 8 (a): the example of a place Details search result (KEYWORD:USC, Category:default)
Once The PHP script retrieves the response from the Google Places API Place Details query and you
Should use a PHP script to parse the JSON object and use photos ' reference (photo_reference
field) to the request high-resolution photos via Google Places API "Place photos" query, as
Documented here:
9
The request requires providing values for three parameters:
? Photo_reference:a string identifier that uniquely identifies A photo. Photo references is
Returned from either a place Search or place Details request.
? Key:your application ' s API key. This key identifies your application for purposes of quota
Management.
? MaxHeight or maxwidth:specifies the maximum desired height or width, in pixels, of the
Image returned by the Photos service.
An example of a HTTP request to the Google Places API Place Photos is shown below:
The response is a binary image file. You should save the top 5 high-resolution photos on the
Server side using the function "file_put_contents ()". Figure 8 (b) shows a sample response
File.
Figure 8 (b): a example of place Photos query response
10
After retrieving place details data, you can pass the "place detail" JSON object to the client side
and show the top 5 reviews and Top 5 photos in a tabular format.
At the top of reviews, you also need to show the name of the selected place.
Note you must only show the photos saved on your server machine. Calling directly to Google
Place Photo API at client side are not allowed.
Table 2:mapping The result from Google Places APIs into HTML table
HTML Table Column API Service response
Review should display at the most 5 reviews present in
Data attribute, which is present in "Reviews->text"
Attribute. Each review should contain the author
Name and author ' s profile photo.
Photo should display at most 5 photos using the
Photo_reference, which is present in "photos"
Attribute.
The details information includes, Sub-sections:reviews and Photos which is by default
Hidden (i.e., collapsed) (as shown in Figure 9).
The details information should over-write the result table and needs to be displayed under the
Search form. When the user clicks the button, the "reviews" sub-section should
be expanded, and the "Photos" sub-section should being hidden (if it is open) and vice versa.
Figure 9:both The reviews and photos is hidden
The "reviews" sub-section should display the top 5 reviews, as shown in Figure 10. Each review
Should display the author ' s name and his/her profile picture and his/her reviews text.
11
Figure 10:when Reviews is clicked, Photos is hidden.
The "Photos" sub-section should display a maximum of 5 Photos (as shown in Figure 11). If any
Photo is clicked, it should being opened in a new tab with the original high-resolution photo saved
On the server side.
12
Figure 11:when Photos is clicked, reviews is hidden.
If The API service returns an empty result set, the page should display "No reviews Found"
Instead of review and "No Photos Found" instead of photo section. A Sample Output is
shown in Figure 13.
Figure 12:when No reviews is found.
13
Figure 13:when No photos is found.
Note that:
? You must use PHP-Request all JSON objects except when calling the Ipapi.com
API which should is called on the client side using JavaScript.
? Expanding or hiding sub-areas should be implemented using JAVASCRIPT and
You aren't allowed to use JQuery.
? High-resolution images must be called using PHP and photos must is saved on
The Server-side machine. The client (JavaScript) would access the photos saved on
The server.
2.4 Displaying Map and Directions
In the search result table, when the corresponding address of a certain record is clicked, a Google
Map with a marker of the should pops up. If the Google Map is already displayed, clicking
It'll make the map hidden again. The map should not over-write the result table and needs to
Be displayed right under the address of this you click on. Please see the details of the video for the.
Should use the Google Maps JavaScript Library, documented at:
Https://developers.google.com/maps/documentation/javascript/adding-a-google-map
To construct the map.
A sample is shown in figure when selecting the address "699 Exposition Blvd, Los Angeles"
of USC Law School Cafe.
Figure 14:maps shown when clicking the address of a record.
14
At the top left corner of the map, there should is a travel mode list (including Walk there, Bike
There, and drive there). If a user clicks on an option, the Google maps with a Marker should is
Replaced by a Google maps with directions from the location so you choose as the ' center point '
The search form to the selected record is on a Google Map. A sample is shown in Figure 15
When choosing "Walk there" based on Figure 14.
Direction service to construct the Direction route map need
Figure 15:the Directions after clicking "Walk there"
2.5 Saving Previous Inputs
In addition to displaying the results, the PHP page should maintain the provided values. For
example, if a user searches for "keyword:usc, Category:café, distance:15 from here", the
User should see what is provided in the search form when displaying the results. In addition,
When clicking on a "Name", the page should display the Reviews/photos and keep the values
Provided in the search form. It follows need to keep the whole search box/input fields
and buttons even while displaying results/errors.
In summary, the search mechanism to be implemented behaves as follows:
? Based on the query in the search form, construct a Web service URL to retrieve the output
From the Google Places API service.
? Pass the (possibly edited) JSON to the client side and parse JSON using JavaScript.
? Display the places information in tabular and chart formats.
? Display the reviews and photos in tabular formats.
? Display the map and directions.
3. Hints
3.1 How to get Google API Key
? To get a Google API key, please follow these steps:
? Go to the Google developers Console:
15
? Create a project.
? At every Google APIs ' Guide page, click "Get a Key" and select a created project.
Note that you should not use a Google account associated with a USC e-mail.
3.2 Google Maps JavaScript API on Demand API documentation
? Adding a Google Map with a Marker to Your Website:
? Directions Service:
3.3 Get geolocation using ip-api.com
You need to use ip-api.com for searching the geolocation based on IP addresses. An example call
Looks like:
The response is a JSON object shown in Figure 16.
Figure 16:response from Ip-api.com API
This article introduces some similar APIs and so do have more choice for your HW6:
16
Use of the Freegeoip API is not recommended.
3.4 Parsing json-formatted data in PHP
In PHP 5, you can parse json-formatted data using the "Json_decode" function. For more
Information, go to
You can encode data into json-formatted objects using the "Json_encode" function. For more
Information, go to
3.5 Read and save contents in PHP
To read the contents of a Json-formatted object, you can use the "file_get_contents" function.
To save contents on the server side, you can use the "file_put_contents" function.
**important**:
? You should don't use JQuery.
? You should don't call the Google Places APIs (including nearby search service, place
Detail service, and place photo service) directly from JavaScript, bypassing the
Apache/http Proxy. Implementing any one of the them in JavaScript instead of PHP would
Result in a 4-point penalty.
Http://www.6daixie.com/contents/19/1335.html

Our Direction field: Window Programming numerical algorithm AI Artificial Intelligence financial statistical Metrology analysis Big Data network programming Web programming Communication Programming game Programming Multimedia Linux plug-in programming API image processing embedded/Microcontroller database programming console process and thread Network security assembly language Hardware programming software Design Engineering Standard Rules. The generation of programming languages or tools including, but not limited to, the following ranges:

C/c++/c# Write

Java Write generation

It generation

Python writes

Tutoring Programming Jobs

The MATLAB Generation writes

Haskell writes

Processing Write

Linux Environment Setup

Rust Generation Write

Data Structure assginment Data structure generation

MIPS Generation Writing

Machine Learning Job Writing

Oracle/sql/postgresql/pig database Generation/Generation/Coaching

Web development, Web development, Web site jobs

Asp. NET Web site development

Finance insurace Statistics Statistics, regression, iteration

Prolog write

Computer Computational Method Generation

Because of professional, so trustworthy. If necessary, please add qq:99515681 or e-mail:[email protected]

: Codinghelp

Write json, PHP, JAVASCRITP programming jobs Google Places API