Created
August 5, 2011 16:35
-
-
Save maxstoller/1127925 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>foursquare :: Explore Sample</title> | |
| <style type="text/css"> | |
| html { height: 100%; } | |
| body { height: 100%; margin: 0; padding: 0; } | |
| </style> | |
| <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> | |
| <script type="text/javascript" src="/scripts/jquery.ba-bbq.js"></script> | |
| <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> | |
| <script type="text/javascript"> | |
| //<![CDATA[ | |
| var client_id = 'XXX'; | |
| var callback_url = 'http://developer.foursquare.com/docs/samples/explore.html'; | |
| /* Attempt to retrieve access token from URL. */ | |
| if ($.bbq.getState('access_token')) { | |
| var token = $.bbq.getState('access_token'); | |
| $.bbq.pushState({}, 2) | |
| } else if ($.bbq.getState('error')) { | |
| } else { | |
| /* Redirect for foursquare authentication. */ | |
| window.location.href = 'https://foursquare.com/oauth2/authenticate?client_id=' + client_id | |
| + '&response_type=token&redirect_uri=' + callback_url; | |
| } | |
| /* HTML 5 geolocation. */ | |
| navigator.geolocation.getCurrentPosition(function(data) { | |
| var lat = data['coords']['latitude']; | |
| var lng = data['coords']['longitude']; | |
| /* Create map. */ | |
| var map = new google.maps.Map(document.getElementById("map_canvas"), { | |
| zoom: 15, | |
| center: new google.maps.LatLng(lat, lng), | |
| mapTypeId: google.maps.MapTypeId.ROADMAP | |
| }); | |
| /* Query foursquare API for venue recommendations near the current location. */ | |
| $.getJSON('https://api.foursquare.com/v2/venues/explore?ll=' + lat + ',' + lng + '&oauth_token=' + token, {}, function(data) { | |
| venues = data['response']['groups'][0]['items']; | |
| /* Place marker for each venue. */ | |
| for (var i = 0; i < venues.length; i++) { | |
| var marker = new google.maps.Marker({ | |
| position: new google.maps.LatLng(venues[i]['venue']['location']['lat'], venues[i]['venue']['location']['lng']), | |
| map: map, | |
| title: venues[i]['venue']['name'] | |
| }); | |
| } | |
| }) | |
| }) | |
| //]]> | |
| </script> | |
| </head> | |
| <body> | |
| <div id="map_canvas" style="width: 100%; height: 100%;"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment