How to get a picture of a place from google maps or places API

Question

I'm using Google Places API to retrieve data about places, but couldn't find how to get a picture of that place, Google Places API just provides icon which is not the same. I need the photo you get when you search for a place in Google Maps in a web browser for example. There is usually more pictures from Panoramio, but Panoramio API can only search for pictures by location and not by a particular restaurant or hotel name for example. Any ideas?

score 14 · Answer 1 · answered Dec 07 '12 at 18:11

14

The Places API just added the ability to request photos directly in the API: https://developers.google.com/maps/documentation/javascript/places#places_photos

answered Dec 07 '12 at 18:11

Dylan

1,658
1
19
25

Avram Lyon · Accepted Answer · 2011-12-11T06:30:59.603

The Places API will give you the coordinates (latitude and longitude) in the place detail response; you can then send the coordinates to the Panoramio API.

For example (drawing from examples in the API docs):

https://maps.googleapis.com/maps/api/place/details/json?reference=<big long key for place>&sensor=true&key=AIzaSyAiFpFd85eMtfbvmVNEYuNds5TEF9FjIPI

Response:

{
  "html_attributions" : [],
  "result" : {
    "address_components" : [
      {
        "long_name" : "48",
        "short_name" : "48",
        "types" : [ "street_number" ]
      },
      {
        "long_name" : "Pirrama Road",
        "short_name" : "Pirrama Road",
        "types" : [ "route" ]
      },
      {
        "long_name" : "Pyrmont",
        "short_name" : "Pyrmont",
        "types" : [ "locality", "political" ]
      },
      {
        "long_name" : "NSW",
        "short_name" : "NSW",
        "types" : [ "administrative_area_level_1", "political" ]
      },
      {
        "long_name" : "AU",
        "short_name" : "AU",
        "types" : [ "country", "political" ]
      },
      {
        "long_name" : "2009",
        "short_name" : "2009",
        "types" : [ "postal_code" ]
      }
    ],
    "formatted_address" : "5/48 Pirrama Road, Pyrmont NSW, Australia",
    "formatted_phone_number" : "(02) 9374 4000",
    "geometry" : {
      "location" : {
        "lat" : -33.8669710,
        "lng" : 151.1958750
      }
    },
    "icon" : "http://maps.gstatic.com/mapfiles/place_api/icons/generic_business-71.png",
    "id" : "4f89212bf76dde31f092cfc14d7506555d85b5c7",
    "international_phone_number" : "+61 2 9374 4000",
    "name" : "Google Sydney",
    "rating" : 4.60,
    "reference" : "CnRlAAAAAfV6JIqSzL8Cf4VnXn0EaI1d5k3IPhdkEonq0MxiUbQFFSVuptVbXbNH4mrevb0bc7G8yWqTUv76i4KTuO_Wf3OrRHjCJJwzQ0mNLjbYGSVqy2eqyrgOUkl6S_sJfTbHzWZYrfPy7KZaet0mM5S6thIQJYuy5v_JD--ZxXEJLWTQRRoU5UaciXBBo89K-bce18Ii9RsEIws",
    "types" : [ "store", "establishment" ],
    "url" : "http://maps.google.com/maps/place?cid=10281119596374313554",
    "vicinity" : "5/48 Pirrama Road, Pyrmont",
    "website" : "http://www.google.com.au/"
  },
  "status" : "OK"
}

We can see that the coordinates are "location" : { "lat" : -33.8669710, "lng" : 151.1958750 }

Then we can send a request to Panoramio, inserting the coordinates, plus a little wiggle room on either side (I did +/- 0.002 degrees, a shape 200 m x 200 m square at the equator, generally smaller). http://www.panoramio.com/map/get_panoramas.php?set=public&from=0&to=20&minx=-33.868&miny=151.193&maxx=-33.864&maxy=151.197&size=medium&mapfilter=true

You may need to do some filtering of the responses to get the closest photo, but this should give you something to work with.

thanks i was thinking about that, it won`t necessarily give the picture of the right place but i guess its the closest you can get. Its just weird they have pics on website but don`t give them anyhow in maps or places api — user975869, Dec 11 '11 at 19:15
Panoramio is no longer a thing. The website (http://www.panoramio.com/) says "Panoramio no longer available after November 4, 2016". API requests all respond with 404 Not Found. — salomvary, Jan 12 '17 at 16:53

Chris Green · Answer 3 · 2012-12-10T00:30:33.947

The Places API now supports the return of one place photo if available for a Place Search request and up to ten place photos for a Place Details request.

If a photos array is returned with your request, you can pass the photo_reference from a contained photo object to a Place Photo request with the maxheight and/or maxwidth, sensor and key parameters:

https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=CnRvAAAAwMpdHeWlXl-lH0vp7lez4znKPIWSWvgvZFISdKx45AwJVP1Qp37YOrH7sqHMJ8C-vBDC546decipPHchJhHZL94RcTUfPa1jWzo-rSHaTlbNtjh-N68RkcToUCuY9v2HNpo5mziqkir37WU8FJEqVBIQ4k938TI3e7bf8xq-uwDZcxoUbO_ZJzPxremiQurAYzCTwRhE_V0&sensor=false&key=AddYourOwnKeyHere

Please see the documentation for more details.

I see that photo. But I want to use it in JS. Can I have it in JSON format with a url? — most venerable sir, Aug 19 '17 at 17:49

score 2 · Answer 4 · answered Mar 06 '17 at 09:01

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Places Searchbox</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 50%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #description {
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
      }

      #infowindow-content .title {
        font-weight: bold;
      }

      #infowindow-content {
        display: none;
      }

      #map #infowindow-content {
        display: inline;
      }

      .pac-card {
        margin: 10px 10px 0 0;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        background-color: #fff;
        font-family: Roboto;
      }

      #pac-container {
        padding-bottom: 12px;
        margin-right: 12px;
      }

      .pac-controls {
        display: inline-block;
        padding: 5px 11px;
      }

      .pac-controls label {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 300;
      }

      #pac-input {
        background-color: #fff;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        margin-left: 12px;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
        width: 400px;
      }

      #pac-input:focus {
        border-color: #4d90fe;
      }

      #title {
        color: #fff;
        background-color: #4d90fe;
        font-size: 25px;
        font-weight: 500;
        padding: 6px 12px;
      }
      #target {
        width: 345px;
      }
    </style>
  </head>
  <body>
    <input id="pac-input" class="controls" type="text" placeholder="Search Box">
    <div id="map"></div>
    <div id="place-list"></div>
    <script>
      // This example adds a search box to a map, using the Google Place Autocomplete
      // feature. People can enter geographical searches. The search box will return a
      // pick list containing a mix of places and predicted search terms.

      // This example requires the Places library. Include the libraries=places
      // parameter when you first load the API. For example:
      // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

      function initAutocomplete() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -33.8688, lng: 151.2195},
          zoom: 13,
          mapTypeId: 'roadmap'
        });

        // Create the search box and link it to the UI element.
        var input = document.getElementById('pac-input');
        var searchBox = new google.maps.places.SearchBox(input);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

        // Bias the SearchBox results towards current map's viewport.
        map.addListener('bounds_changed', function() {
          searchBox.setBounds(map.getBounds());
        });

        var markers = [];
        // Listen for the event fired when the user selects a prediction and retrieve
        // more details for that place.
        searchBox.addListener('places_changed', function() {
          var places = searchBox.getPlaces();

          if (places.length == 0) {
            return;
          }

          // Clear out the old markers.
          markers.forEach(function(marker) {
            marker.setMap(null);
          });
          markers = [];

          // For each place, get the icon, name and location.
          var bounds = new google.maps.LatLngBounds();
          places.forEach(function(place) {
            if (!place.geometry) {
              console.log("Returned place contains no geometry");
              return;
            }
            var icon = {
              url: place.icon,
              size: new google.maps.Size(71, 71),
              origin: new google.maps.Point(0, 0),
              anchor: new google.maps.Point(17, 34),
              scaledSize: new google.maps.Size(25, 25)
            };

            var photoUrl = place.photos[0].getUrl({maxWidth: 400, maxHeight: 400});
            var img = document.createElement("img");
            img.setAttribute('src', photoUrl + "photo.jpg");
            document.getElementById('place-list').appendChild(img);

            // Create a marker for each place.
            markers.push(new google.maps.Marker({
              map: map,
              icon: photos[0].getUrl({'maxWidth' : 35,maxHeight' : 35})
              title: place.name,
              position: place.geometry.location
            }));

            if (place.geometry.viewport) {
              // Only geocodes have viewport.
              bounds.union(place.geometry.viewport);
            } else {
              bounds.extend(place.geometry.location);
            }
          });
          map.fitBounds(bounds);
        });
      }

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=<KEY_API>&libraries=places&callback=initAutocomplete"
         async defer></script>
  </body>
  </html>

While this code snippet may solve the question, [including an explanation](//meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, this reduces the readability of both the code and the explanations! — kayess, Mar 06 '17 at 09:23

score 1 · Answer 5 · answered Aug 24 '19 at 14:33

First get the photo_reference from the response:

 var photoRef;
 if (data.results[i].photos && Array.isArray(data.results[i].photos)) {
 photoRef = data.results[i].photos[0].photo_reference;
 }

Use the Google Photos API endpoint to GET the place photo/picture:

https://maps.googleapis.com/maps/api/place/photo?maxwidth=960&photoreference="+ photoRef +"&key=AIzaSyBp0cy7ti0z5MJMAwWiPMNvbJobmWYGyv4' alt=''/>

See for yourself:

score 0 · Answer 6 · answered Jun 02 '21 at 20:45

I’m creating an API for getting the best photo spots/locations given a GPS coordinate. There is a free plan.

You have difference endpoints like:

Given a GPS coordinate (latitude and longitude), the API gives you the nearest curated photo location.
Given a GPS position/coordinate, and a Radius length (kilometers), the API provides a list of curated photo locations present in that area (the circle created by the coordinate and the radius)
Given a query/text, the API retrieve the list of curated photo locations that matches that text
… and also some other endpoints like “Get a Random Spot”

You can check the API documentation in https://getnofilter.com/developers

New endpoints are coming soon.

If you need to extend the free limits, you can send me an email and I can do it (check the email in the documentation)

How to get a picture of a place from google maps or places API

6 Answers6

Linked