Using JAVASCRIPT/JQUERY - Generate a key to enable you to use the Google maps AP

ID: 3826492 • Letter: U

Question

Using JAVASCRIPT/JQUERY -

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

<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 spent good amount of time on your question.. and after lot of searching on internet, i found that the google api gives me a error "No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '…' is therefore not allowed access" when i invoke it locally through my browser.. It means the API is only accessible through the Website only.. nowhere else..

For this, the solution is to use JSONP request of AJAX, but google blocks this too.. I have wrote some code to use this.. but can't work successfully.. Let me know in comments once you find the correct API and then i will try to again help you. Till now, my code is below:

<!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>
<script>

$('#btnGoogle').click(function() {
   var query = $('#googleSearch').val();

   // send the api request..
   // then parse the result in success function
   $.ajax({
       url: 'https://maps.googleapis.com/maps/api/place/textsearch/json?key=AIzaSyB3uXHogG1eKiNOXOn6yfUyb1Gtlpr2XDc&query=' + query,
       dataType: 'jsonp',
       jsonpCallback: 'callback',
       type: 'GET',
       success: function() { console.log('Success!'); },

       // AS google api doesn't support JSONP requests directly.. we are hitting the error function with data
       error: function(XMLHttpRequest, textStatus, errorThrown) {
           console.log('goes to error');
       },
       jsonp: 'jsonp'
   });

});

</script>
</body>
</html>

Navigate

Using JAVASCRIPT-Generate a key to enable you to use the Google maps API https:/

Using JCPenney as an example, explain the observed activities and their respecti

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

Using JAVASCRIPT/JQUERY - Generate a key to enable you to use the Google maps AP

Question

Explanation / Answer

Related Questions

Navigate