understand the google places api for using with a webpage

Question

OK so I rad through the documentation however I still don't understand exactly how it works. If I want to search for a place I am supposed to use an HTTP get request to return json data. How do I do this using JavaScript? The documentation just shows me how to structure the HTTP request like so

https://maps.googleapis.com/maps/api/place/nearbysearch/output?parameters

But how do I then send this request? Pointing me to a tutorial or something would be great.

score 2 · Accepted Answer · answered Nov 10 '12 at 22:07

The Places Library does all the work. You only have to send the fields you require and then display Place Details Results

The following code is taken from the documentation to show you where to add to it to implement your preferences.

var map;
var service;
var infowindow;

function initialize() {
  var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);

  map = new google.maps.Map(document.getElementById('map'), {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: pyrmont,
      zoom: 15
    });
 //Here you add the fields you require for request for PlacesService() 
  var request = {
    location: pyrmont,
    radius: '500',
    types: ['store']
  };

  service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);
}
  //Here you display the Place Details Results
function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      var place = results[i];
      createMarker(results[i]);
    }
  }
}

THanks, but I wanted to do it myself using an ajax call. However this is not possible using javascript because the google places api only supports json requests and not jsonp so I had to do it using a php file_get_contents call and then send it back to my javascript file. — user1809913, Nov 14 '12 at 22:22

score 0 · Answer 2 · edited May 23 '17 at 11:48

Short version: Write an AJAX call to get the data, then write a callback function to do something with that data.

Long version:

Ajax Requests

Ajax requests are HTTP requests made from within the webpage, such that the page does not perform any navigation action. These are used to do things like grab data from APIs (like what you are trying to do) or load images, load additional page content, etc. etc.

In your case, you want to perform a simple AJAX request to the API URL, and then do something with the data you get back.

Since you sound like you're new to the realm of JavaScript I highly recommend using the jQuery JavaScript library. It makes things such as Ajax a walk in the park. Specifically, you can use the jQuery.Ajax() function to build your web request. You then specify the callback function that you pass your API data to, and do something with it.

understand the google places api for using with a webpage

2 Answers2

Ajax Requests

Linked