4.4 Google Places: Calling the API and mapping the results

Function to request Places from Google

In order to get Places from Google, you need to make a request. Create a function that makes this call. You want to feed this function the following parameters:

title (a name you want to give this group of places)

latlng (the center point)

radius (how far out you want to search from the center point in meters)

types (an array of values that tells Google which places you are requesting. Valid types are listed here.)

icon (the url to the icon image)

The function to make the request would then look like this:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

//Request places from Google

up206b.placesRequest=function(title,latlng,radius,types,icon)

{

//Parameters for our places request

varrequest={

location:latlng,

radius:radius,

types:types

};

//Make the service call to google

varcallPlaces=newgoogle.maps.places.PlacesService(map);

callPlaces.search(request,function(results,status)

{

//check to see if Google returns an "OK" status

if(status==google.maps.places.PlacesServiceStatus.OK)

{

//trace what Google gives us back

trace(results);

};

});

}

Note that at this point, the function makes an AJAX service call to Google, and simply traces the results in the console. Also, the placesRequest function is not called anywhere in the code at this time. Let’s add a call to this function, much like you have done for your createMarker function in previous tutorials. Add the following lines (highlighted 12-13) to the end of the initialize function:

“I want a set of places from Google that match their category for ‘school’… which I will also call ‘Schools’… within 1500 meters (radius) of this location (latlng)… to be displayed with a school icon (images/school.png)…

Running this yields an output of an array of objects in the developer tools (make sure to choose the console tab):

Clicking on the triangle next to each object reveals what is inside:

Now let’s use the jQuery .each function to loop through the results of the array. Add the highlighted lines below:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

//Request places from Google

up206b.placesRequest=function(title,latlng,radius,types,icon)

{

//Parameters for our places request

varrequest={

location:latlng,

radius:radius,

types:types

};

//Make the service call to google

varcallPlaces=newgoogle.maps.places.PlacesService(map);

callPlaces.search(request,function(results,status)

{

//check to see if Google returns an "OK" status

if(status==google.maps.places.PlacesServiceStatus.OK)

{

//trace what Google gives us back

trace(results);

$.each(results,function(i,place){

trace(place);

});

};

});

}

Inspect the traced objects, and begin to outline the necessary parameters needed to map the places. Google often returns an object called “geometry”. By default, this typically contains the coordinates for a given location, and can be called as a LatLng object as “geometry.location”. Now, you have the necessary information to create markers for each “place” that google has given you. Add the highlighted lines below to the .each loop you just created: