Dumb Hack to Get Google Places Reference Key

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.

Subscribe
Notify of
guest
3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
erea77
erea77
6 years ago

Did you ever figure out an easier way to grab the placeid?

g_mena
g_mena
6 years ago

we really need to figure out to get the place_id because reference is deprecated. thanks for your post but i couldn’t get it to work. wasn’t sure which content i needed to edit/change get the example to work.

Chris Godwin
Chris Godwin
6 years ago

Love the “var poop =” tidbit. I use it all the time, especially when flushing my caches.

John Hartley is a Director of Product Engineering at Beam Dental in Columbus, OH. With 5+ years of leadership experience he has worked in startups, agencies, and began his career as a freelance Front End Developer. Always looking to iterate, this blog is a place for him to share his knowledge as well as hone his craft, challenge assumptions, and build a strong base of leadership and management knowledge. Connect with him on LinkedIn

3
0
Would love your thoughts, please comment.x
()
x