How to get city photo with google places api

Question

for my react weather-app i need to attach to every Card element that represents a city an img of that city. besides downloading a lot of images, I found that google places can give me that info. I registerd and got an api key from Google Cloud Platform.

here is my Card component:

p.s. - the https from herokuapp before the googleapi url is the only solution i found to deal with CORS error

import React, { useState, useEffect } from 'react'
import Card from 'react-bootstrap/Card';
import Button from 'react-bootstrap/Button';

export default function CardUI({ apiKey, place }) {
    
    const [photoUrl, setPhotoUrl] = useState('');
    
    useEffect( () => {
        fetch(`https://cors-anywhere.herokuapp.com/https://maps.googleapis.com/maps/api/place/details/
json?place_id=${place}&fields=photo&key=${apiKey}`)
            .then(response =>response.json())
            .then(data => {
                setPhotoUrl(data);
                console.log(data);
            })
    }, [])
    
    return (
        <Card style={{ width: '18rem' }}>
            <Card.Img variant="top" src={photoUrl} />
            <Card.Body>
                <Card.Title>Card Title</Card.Title>
                <Card.Text>
                    Some quick example text to build on the card title and make up the bulk of
                    the card's content.
                </Card.Text>
                <Button variant="primary">Go somewhere</Button>
            </Card.Body>
        </Card>
    )
}

Answer 1

No need to have any special things or libraries. Simply put the ImagesAPI in the src tag then it's done all the images would be loaded easily without any effort.

 const ref = props.item.photos[0].photo_reference;
 setimg(`https://maps.googleapis.com/maps/api/place/photo?maxwidth=400
         &photoreference=${ref}&key=${APIKEY}`
       );

Access Image in SRC tag

 <img src={img} alt="" />

Or in a simple way

 <img 
      src="https://maps.googleapis.com/maps/api/place/photo?maxwidth=400
           &photoreference=reference&key=APIKEY"
      alt=""
  />

Answer 2

Your CORS error might be because you are using Places photos webservice requests. You can use the Places Library of Maps JavaScript API for client side services.

Here's a sample where I use Autocomplete to give you a suggestion in the place you want to see then once you chose the address, it will get the place details and you can get the URL of the place. Here's a sample code and below is the code snippet:

/* global google */
import React, { useEffect, useState } from "react";
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";

const CardUI = () => {
  const [photoUrl, setPhotoUrl] = useState("");

  useEffect(() => {
    createScriptLoadMap();
  }, []);

  const initialize = () => {
    let placeSearch;
    let autocomplete;
    //use Places Autocomplete
    autocomplete = new google.maps.places.Autocomplete(
      document.getElementById("autocomplete"),
      { types: ["geocode"] }
    );
    // When the user selects an address from the drop-down, populate the
    // address fields in the form.
    autocomplete.addListener("place_changed", function () {
      placeSearch = autocomplete.getPlace();
      //set photoURL from Places photos result
      setPhotoUrl(
        placeSearch.photos[0].getUrl({ maxWidth: 350, maxHeight: 350 })
      );
    });
  };

  const createScriptLoadMap = () => {
    var gScript = document.querySelector("[data-setted]");
    var isSetted = gScript && gScript.getAttribute("data-setted");

    if (!isSetted) {
      var index = document.getElementsByTagName("script")[0];
      var script = document.createElement("script");
      script.src =
        "https://maps.google.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initialize";
      script.async = true;
      script.defer = true;
      script.setAttribute("data-setted", true);
      index.parentNode.insertBefore(script, index);
      window.initialize = initialize;
    } else {
      initialize();
    }
  };

  return (
    <main>
      <div id="locationField">
        <input id="autocomplete" placeholder="Enter your address" type="text" />
      </div>
      <Card style={{ width: "18rem" }}>
        <Card.Img variant="top" src={photoUrl} />
        <Card.Body>
          <Card.Title>Card Title</Card.Title>
          <Card.Text>
            Some quick example text to build on the card title and make up the
            bulk of the card's content.
          </Card.Text>
          <Button variant="primary">Go somewhere</Button>
        </Card.Body>
      </Card>
    </main>
  );
};

export default CardUI;