Using the Google Places API

Demo @

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:

<script type="text/javascript" src=""></script>

Using the coordinates from the geolocation API (described here), construct a map as follows:

var loc = new google.maps.LatLng(coords.latitude, coords.longitude);
// map_canvas must have a defined height and width
var map = new google.maps.Map(document.getElementById("map_canvas"), {
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              center: loc,
              zoom: 13

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).

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);

Plotting the Result List

To plot the result list from above, I wrote the following function to drop marker overlays.

var overlays = [];
function plotResultList(){
    var iterator = 0;                  
    for(var i = 0; i < resultList.length; i++){
            var marker = new google.maps.Marker({
                position: resultList[iterator].geometry.position,
                map: map,
                title: resultList[iterator].name,
                animation: google.maps.Animation.DROP

        }, 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.

var infoWindow = new google.maps.InfoWindow();      
google.maps.event.addListener(marker, 'click', function() {
    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 !== 'undefined'){
                content += "<br><small><a href='" + + "'>website</a></small>";
        infoWindow.setContent(content);, marker);         

Related Posts

A New Kind of Task Board

A kanban board with dynamic columns

Subdomains in Flask

Using subdomains to identify tenants in a multitenant Flask application

Leveraging Postgresql Schemas for Multitenancy

Segregating web application data by company using Flask and Postgresql

Time Logger for Windows 10 is Out

A time tracking app for Windows 10

Numbers Free for Windows 10 is Out

A simple block game for Windows 10

Getting All Articles Referenced in a Wikipedia Article

A bookmarklet to pull all wikipedia links from a wiki article.

Using the HTML5 Geolocation API

Getting a users position using the HTML5 Geolocation API

Syntactic Clustering of News Headlines

grouping together news articles by subject using tf-idf weighting

Retrieving Yahoo! Finance Data using YQL

Getting stock information programmatically through Yahoo! Finance

A 16-Step Sequencer in Javascript