Using JAVASCRIPT - Generate a key to enable you to use the Google maps API https
ID: 3823330 • Letter: U
Question
Using JAVASCRIPT -
Generate a key to enable you to use the Google maps API https://developers.google.com/maps/documentation/javascript/
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>
Set up a click event for the button
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".
Then you will make a JSON call using this URL and parse the results to build the HTML
You should filter your results to display only those places that have rating >= 4.0.
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.
Display a <hr> between each result.
Formulate your HTML and then populate it in the html in the div having id googleResults.
//this is what I have for the html so far
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Google Maps Search</title>
<link href="css/styles.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<section>
<h1>Google Maps Search</h1>
<p>
Search Google: <input type="text" size="30" id="googleSearch">
<input type="button" value="Search" id="btnGoogle">
</p>
<div id="googleResults">
</div>
</section>
</body>
</html>
Explanation / Answer
I have generated the key using https://developers.google.com/maps/documentation/javascript/
key=AIzaSyCCqO9ZPqwFpN_c59qEmtjP2-itoqDTjms, if we give query=theaters in california. as per the html, it space converts into %20 which becomes query=theaters%20in%20california.
For rating >= 4.0, need to append &rating%20>=%204.0.
Now the URL becomes
https://maps.googleapis.com/maps/api/place/textsearch/json?key=AIzaSyCCqO9ZPqwFpN_c59qEmtjP2-itoqDTjms&query=theaters%20in%20california&rating%20%3E=%204.0
The URL will open on button click
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Google Maps Search</title>
<link href="css/styles.css" type="text/css" rel="stylesheet">
</head>
<body>
<section>
<h1>Google Maps Search</h1>
<p>
Search Google: <input type="text" size="30" id="googleSearch" />
<input type="button" value="Search" id="btnGoogle"/>
</p>
<div id="googleResults">
</div>
</section>
</body>
</html>
<script>
function doSomething(e)
{
document.getElementsByClassName("gotoLINK")[0].click();
// look for window.event in case event isn't passed in
e = e || window.event;
//if (e.keyCode == 13)
{
document.getElementById('btnGoogle').click(https://maps.googleapis.com/maps/api/place/textsearch/json?key=AIzaSyCCqO9ZPqwFpN_c59qEmtjP2-itoqDTjms&query=theaters%20in%20california&rating%20%3E=%204.0);
return false;
}
<tr id="abc">
<td class="goTo" id="goToLINK">
<a class="gotoLINK arrow" href="https://maps.googleapis.com/maps/api/place/textsearch/json?key=AIzaSyCCqO9ZPqwFpN_c59qEmtjP2-itoqDTjms&query=theaters%20in%20california&rating%20%3E=%204.0">LINK</a>
</td>
</tr>
return true;
}
</script>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.