Google Maps API Location Search

Learning outcomes:

• Interact with a basic API provided by another company
• Filter the results to show what you want

jQuery actions learned:

• handle form submission
• handle actions like click or change
• Parse json results
• Filter results

This project will require you to use a simple search form in HTML to accept a search string and display the results from the google maps API based on that search string. You will be filtering the results and only showing the ones that have a high rating.

Steps to follow:

1.Generate a key to enable you to use the Google maps API https://developers.google.com/maps/documentation/javascript/

2.In the Starter zip file attached, edit the app.js file, set up the following URL in a variable - https://maps.googleapis.com/maps/api/place/textsearch/json?key=< your key here>

3.Set up a click event for the button

4.In the click event, you will add a query string to this url having the value of the search string. Ex. https://maps.googleapis.com/maps/api/place/textsearch/json?key=< your key here>&query=theaters in california where the search string is "theaters in california".

5.Then you will make a JSON call using this URL and parse the results to build the HTML

6.You should filter your results to display only those places that have rating >= 4.0.

7.You should display the name of the place in bold, the address and the rating and any other relevant info you would like to display.

8.Display a < hr> between each result.

9.Formulate your HTML and then populate it in the html in the div having id googleResults.

Sample output:

This shows the result of all theaters in California having rating >= 4. see image.