Dumb Hack to Get Google Places Reference Key

Posted on: February 16th, 2014

Okay, so this is pretty stupid, but I still for the life of me can’t figure out how to grab my Google Places Reference Key to use in the Google Places API. I read through everything but only found examples that were already using a reference key. So I opted to go for a stupid workaround that I knew would work.

The Places API spits out an object from a search with 10 different pieces of information, in the first level at least. So here’s the code I used:

<!DOCTYPE html>
<html>
  <head>
    <title>Place details</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #map-canvas {
        width: 80%;
      }
    </style>
    
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
    <script>
        // I did very little cleanup after it worked, so view the grossness

        var map;
        var service;
        var infowindow;
        var reference_key;

        function initialize() {
          var pyrmont = new google.maps.LatLng(LAT , LONG);

          map = new google.maps.Map(document.getElementById('map-canvas'), {
              center: pyrmont,
              zoom: 15
            });

          var request = {
            location: pyrmont,
            radius: '500',
            query: 'YOUR Query'
          };

          service = new google.maps.places.PlacesService(map);
          var poop = service.textSearch(request, callback);
        }


        function callback(results, status) {
          if (status == google.maps.places.PlacesServiceStatus.OK) {

            var obj = eval(results);
            console.log(obj);
            reference_key = obj[0].reference;

            var reviews = google.maps.places.PlaceResult();

          }
        }

        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

To run you through what you should see, you’ll get a map to the left centered on the lat, long you set and based on the query that you set up as well (Line 37). With that you should get the results of several places that match your search. Open console and check out the Objects that are waiting for you. They should be laid out like this:

formatted_address: "2461 Coral Way, Miami, FL, United States"
geometry: Object
html_attributions: Array[0]
icon: "http://maps.gstatic.com/mapfiles/place_api/icons/dentist-71.png"
id: "9558f3e8193cd81d69bd6e40eba5b2983b86fc56"
name: "Dr. Ramon Bana, DDS"
opening_hours: Object
photos: Array[1]
rating: 4.7
reference: "CoQBdgAAAE1pNpBPXSsgpwCyvJ6qZxmw73SNRt4V1YSZqyfnqnaZWgG1_cjRvWu1TMsnnUIwozibby9M8jIJgMwsFi7iyTxyqXNWTa0aZMZBMC03BhnQx_VV-KP90AvuORf6F9NcocmC9ve1Tfk5jNY3sFZkcbTbG6_c5x5rXnWYwlTVVwzoEhCY7UCUkiqAh2IsKE92dzknGhSLcf-UBetR77CsLLpOikIjO0GEuQ"
types: Array[4]
__proto__: Object

And looky there, there’s a reference just waiting for you. You can now use that reference to grab reviews etc. with the Place Details portion of the Places API. Again, there’s probably an easier way to do this, but sometimes I’m dumb and have to do it in a very dumb way. Enjoy!

If you couldn’t tell I’m still a n00b in terms of native JavaScript, so this was a fun little experiment in figuring out what exactly I need to do to grab parts of an Object and throw them into console. Let me know your thoughts and if you’ve seen a better way to do this.

For those of you that cringed when you saw eval() I’ve already been scolded about that, so save those comments or let me have it to really rub salt in the wound.

Tags:

previous post: Pull Google Reviews and Rotate next post: Why I Finally Paid For a Template – And Why I Won’t Do it Again