API Access: YELP

The following are instructions on how to use the Yelp API for your maproom.

First, go to Yelp’s developer page and request an API key.  Once you have your key, you will use this in the URL to every API call you make.

Setting up

First, let’s start with an empty maproom layout:

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
   
    <style type="text/css">
        html { height: 100% }
        body { height: 100%; margin: 0px; padding: 0px }
        #map_canvas { height: 100% }
    </style>
   
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
   
    <!-- jQuery -->
    <script type="text/javascript" src="http://yohman.bol.ucla.edu/jquery-1.5.2.min.js"></script>

    <script type="text/javascript">    
        //declare namespace
        var yoh = {};
       
        //declare map
        var map;
       
        //trace function for debugging
        function trace(message)
        {
            if (typeof console != 'undefined')
            {
                console.log(message);
            }
        }

        //Function that gets run when the document loads
        yoh.initialize = function()
        {
            var latlng = new google.maps.LatLng(34.0194543,-118.4911912);
            var myOptions = {
                zoom: 12,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
           
        }
    </script>
</head>

<body onload="yoh.initialize()">
    <!-- side panel div container -->
    <div style="position:absolute; width:380px; height: 100%; overflow:auto; float:left; padding-left:10px; padding-right:10px;">
        <h1>Yelp API</h1>
    </div>
    <!-- map div container -->
    <div id="map_canvas" style="height:100%; margin-left:400px;"></div>
</body>
</html>

Next, create a few global variables:

1
2
3
4
5
6
7
8
//array to hold yelp markers
var yelp = [];

//defines bounding box of all locations
var bounds;

//info window
var infowindow = new google.maps.InfoWindow();

Creating a function that calls Yelp’s API

For the purposes of this tutorial, we will use Yelp’s “geopoint and radius” search API, which is documented here.  This will allow you to feed latitude and longitude coordinates, and get back results for businesses around that center point.  To make an API call, you must submit a URL call like this:

http://api.yelp.com/business_review_search?term=yelp&amp;lat=37.788022&amp;long=-122.399797&amp;radius=10&amp;limit=5&amp;ywsid={your yelp id}

Let’s break this down:

  • term: this is a search term (ie: cafe, schools)
  • lat/long: latitude and longitude
  • radius: distance from center point it will search against
  • limit:  maximum number of returns (up to 20)
  • ywsid:  required ID key

Now let’s create a new function that generates this URL based on the center latitude and longitude of the map. Google has a function to get the current center latitude and longitude coordinates which we will use:

  • map.getCenter().lat()
  • map.getCenter().lng()

Here’s the function:

1
2
3
4
5
6
7
8
9
10
yoh.getYelp = function(term)
{
    bounds = new google.maps.LatLngBounds ();
    $.getJSON('http://api.yelp.com/business_review_search?lat='+map.getCenter().lat()+'&long='+map.getCenter().lng()+'&limit=20&ywsid=ynoYeq0HNwWfPKFRqK-5qg&term='+term+'&callback=?',
        function(data)
        {
            trace(data);               
        }
    );
}

Tracing the data to see what we need

Notice that we are using the trace function to see what gets returned first. Using Chrome’s developer tools, see what appears in the console window.

Yelp trace

Yelp trace

According to this, the following are the key parameters we need:

  • object -> businesses (array) -> name
  • object -> businesses (array) -> latitude
  • object -> businesses (array) -> longitude
  • object -> businesses (array) -> photo_url
  • object -> businesses (array) -> url

Creating a second function to map the results

Now let’s create a second function that maps these results:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//Function to create yelp marker
yoh.createYelpMarker = function(i,latitude,longitude,title, infowindowcontent)
{
    var markerLatLng = new google.maps.LatLng(latitude,longitude);  
   
    //extent bounds for each stop and adjust map to fit to it
    bounds.extend(markerLatLng);
    map.fitBounds(bounds);

    yelp[i] = new google.maps.Marker({
        position: markerLatLng,
        map: map,
        title: title,
        icon: 'http://yohman.bol.ucla.edu/images/yelp.png'
    });

    //add an onclick event
    google.maps.event.addListener(yelp[i], 'click', function() {
        infowindow.setContent(infowindowcontent);
        infowindow.open(map,yelp[i]);
    });
}

The createYelpMarker function accepts the following parameters:

  • i: the array count
  • latitude
  • longitude
  • title: the name of the yelp listing
  • infowindowcontent: an html text string that will be used to populate the infowindow

Modifying the getYelp function

Finally, we need to modify the getYelp function to use the createYelpMarker we just created:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
yoh.getYelp = function(term)
{
    bounds = new google.maps.LatLngBounds ();
    $.getJSON('http://api.yelp.com/business_review_search?lat='+map.getCenter().lat()+'&long='+map.getCenter().lng()+'&limit=20&ywsid=ynoYeq0HNwWfPKFRqK-5qg&term='+term+'&callback=?',
        function(data)
        {
            $.each(data.businesses, function(i,item){
                infowindowcontent = '<strong>'+item.name+'</strong><br>';
                infowindowcontent += '<img src="'+item.photo_url+'"><br>';
                infowindowcontent += '<a href="'+item.url+'" target="_blank">see it on yelp</a>';
               
                yoh.createYelpMarker(i,item.latitude,item.longitude,item.name, infowindowcontent);
            });                        
        }
    );
}

Notice that for each yelp entry, the function creates an “infowindowcontent” variable that creates an HTML string that populates the infowindow.

Complete code sample

Make sure to replace the namespace, and use your own Yelp API ID.

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
   
    <style type="text/css">
        html { height: 100% }
        body { height: 100%; margin: 0px; padding: 0px }
        #map_canvas { height: 100% }
    </style>
   
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
   
    <!-- jQuery -->
    <script type="text/javascript" src="http://yohman.bol.ucla.edu/jquery-1.5.2.min.js"></script>

    <script type="text/javascript">    
        //declare namespace
        var yoh = {};
       
        //declare map
        var map;
       
        //array to hold yelp markers
        var yelp = [];

        //defines bounding box of all locations
        var bounds;

        //info window
        var infowindow = new google.maps.InfoWindow();
       
        //trace function for debugging
        function trace(message)
        {
            if (typeof console != 'undefined')
            {
                console.log(message);
            }
        }
       
        //toggle array layers on/off
        yoh.toggleArrayLayer = function(arraylayer)
        {
            if (arraylayer) {
                for (i in arraylayer) {                
                    if (arraylayer[i].getVisible() == true)
                    {
                        arraylayer[i].setMap(null);
                        arraylayer[i].visible = false;
                    }
                    else
                    {
                        arraylayer[i].setMap(map);
                        arraylayer[i].visible = true;
                    }
                }
            }
        }
       
        //Function to create yelp marker
        yoh.createYelpMarker = function(i,latitude,longitude,title, infowindowcontent)
        {
            var markerLatLng = new google.maps.LatLng(latitude,longitude);  
           
            //extent bounds for each stop and adjust map to fit to it
            bounds.extend(markerLatLng);
            map.fitBounds(bounds);
       
            yelp[i] = new google.maps.Marker({
                position: markerLatLng,
                map: map,
                title: title,
                icon: 'http://yohman.bol.ucla.edu/images/yelp.png'
            });
       
            //add an onclick event
            google.maps.event.addListener(yelp[i], 'click', function() {
                infowindow.setContent(infowindowcontent);
                infowindow.open(map,yelp[i]);
            });
        }
       
        //function to get data from YELP
        yoh.getYelp = function(term)
        {
            bounds = new google.maps.LatLngBounds ();
            $.getJSON('http://api.yelp.com/business_review_search?lat='+map.getCenter().lat()+'&long='+map.getCenter().lng()+'&limit=20&ywsid=ynoYeq0HNwWfPKFRqK-5qg&term='+term+'&callback=?',
                function(data)
                {
                    $.each(data.businesses, function(i,item){
                        trace(item);
                        infowindowcontent = '<strong>'+item.name+'</strong><br>';
                        infowindowcontent += '<img src="'+item.photo_url+'"><br>';
                        infowindowcontent += '<a href="'+item.url+'" target="_blank">see it on yelp</a>';
                       
                        yoh.createYelpMarker(i,item.latitude,item.longitude,item.name, infowindowcontent);
                    });                        
                }
            );
        }

        //Function that gets run when the document loads
        yoh.initialize = function()
        {
            var latlng = new google.maps.LatLng(34.0194543,-118.4911912);
            var myOptions = {
                zoom: 12,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
           
            //Sample call for yelp data for cafe's
            yoh.getYelp('cafe');
        }
    </script>
</head>

<body onload="yoh.initialize()">
    <!-- side panel div container -->
    <div style="position:absolute; width:380px; height: 100%; overflow:auto; float:left; padding-left:10px; padding-right:10px;">
        <h1>Yelp API</h1>
        <input type="checkbox" id="toggleFlickr" onClick="yoh.toggleArrayLayer(yelp)" checked> yelp layer
    </div>
    <!-- map div container -->
    <div id="map_canvas" style="height:100%; margin-left:400px;"></div>
</body>
</html>

Leave a Reply