Demo @ http://www.gurchet-rai.net/places/
The Google Places API is a web service that returns yelp-like information (ratings, reviews, contact info) based on your location. Using the HTML5 geolocation API described in my last post, I’ll go over how I made a simple little app that lets you view details for places near you.
Getting a Map Near You
The Google Maps V3 Javascript API can be used to easily get a map centered around your location.
First, include the maps API and the places API:
1 | <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script> |
Using the coordinates from the geolocation API (described here), construct a map as follows:
1 2 3 4 5 6 | var loc = new google.maps.LatLng(coords.latitude, coords.longitude); var map = new google.maps.Map(document.getElementById("map_canvas"), { mapTypeId: google.maps.MapTypeId.ROADMAP, center: loc, zoom: 13 }); |
Note that the dom element (#map_canvas) must have a defined width and height.
Getting Local Points of Interest
Now that we have a map, we can integrate the Google Places API and build a localized search. The following will get up to 20 results within 5 km of the maps center point (paging is ignored for this example).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var resultList = []; var service = new google.maps.places.PlacesService(map); var request = { location: map.getCenter(), radius: '5000', query: <search string> }; service.textSearch(request, function(results, status, pagination){ if (status == google.maps.places.PlacesServiceStatus.OK) { resultList = resultList.concat(results); plotResultList(); } }); |
Plotting the Result List
To plot the result list from above, I wrote the following function to drop marker overlays.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | var overlays = []; function plotResultList(){ var iterator = 0; for(var i = 0; i < resultList.length; i++){ setTimeout(function(){ var marker = new google.maps.Marker({ position: resultList[iterator].geometry.position, map: map, title: resultList[iterator].name, animation: google.maps.Animation.DROP }); overlays.push(marker); iterator++; }, i * 75); } } |
Show Additional Details for each Place
The Google Places API can be used to fetch information like contact info, ratings, and reviews. Here’s some code to overlay some of this info when a marker is clicked.
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 | var infoWindow = new google.maps.InfoWindow(); google.maps.event.addListener(marker, 'click', function() { infoWindow.close(); var request = { reference: resultList[iterator].reference }; service.getDetails(request, function(place, status){ var content = "<h2>" + name + "</h2>"; if(status == google.maps.places.PlacesServiceStatus.OK){ if(typeof place.rating !== 'undefined'){ content += "<p><small>Rating: " + place.rating + "</small></p>"; } if(typeof place.formatted_address !== 'undefined'){ content += "<br><small>" + place.formatted_address + "</small>"; } if(typeof place.formatted_phone_number !== 'undefined'){ content += "<br><small><a href='tel:" + place.formatted_phone_number + "'>" + place.formatted_phone_number + "</a></small>"; } if(typeof place.website !== 'undefined'){ content += "<br><small><a href='" + place.website + "'>website</a></small>"; } } infoWindow.setContent(content); infoWindow.open(map, marker); }); }); |
