GoogleMapsAPIで取得した場所の画像を表示するまで

この記事について
PlaceAPIで場所を検索する
迷った点
結論
参考

この記事について

GoogleMapsAPIの1つ､placesを使ってお店などの情報を取得することができる｡このとき､場所に紐づいている画像（photos）を取得する事ができる｡

この画像を表示するときに少しハマってしまったためメモとして残す｡

APIKEYなどは取得されていてAPIを実行できる状態となっているものとする｡
Expo(JavaScript)環境とする

PlaceAPIで場所を検索する

検索方法

PlaceAPIでは､いくつかモード?が存在する｡今回は､ serachNearby を使う｡
bodyのcircle.centerの latitude , longitude を中心に､ radius メートルの中から includeTypes に指定した施設を検索する｡

  const response = await fetch(`https://places.googleapis.com/v1/places:searchNearby`, {
    method: 'POST',
    headers: new Headers({
      'Content-Type': 'application/json',
      'X-Goog-Api-Key': process.env.GOOGLE_MAPS_API_KEY || '',
      'X-Goog-FieldMask':
        'places.displayName,places.formattedAddress,places.rating,places.location,places.photos,places.websiteUri',
    }),
    body: JSON.stringify({
      maxResultCount: 10,
      includedTypes,
      languageCode: 'ja',
      locationRestriction: {
        circle: {
          center: {
            latitude,
            longitude,
          },
          radius,
        },
      },
    }),
  })
    .then((response) => response.json())
    .catch((e) => console.log(e));

X-Goog-FieldMask で指定したパラメータを返却してくれる｡
displaNameだと､お店や施設の名称｡今回常用となるのは places.photos の中身である｡

レスポンス

試しに東京駅付近のカフェを取得してみると､こんな感じにデータが取れます｡

[{
   "formattedAddress": "日本、〒103-8265 東京都中央区XXXXXXX",
    "location": {
        "latitude": 35.6....,
        "longitude": 139.7...
    },
    "rating": 4.1,
    "displayName": {
        "text": "XXXXXXX.",
        "languageCode": "ja"
    },
    "photos": [
        {
            "name": "places/xxxxx/photos/xxx-tHSauwHxxxx",
            "widthPx": 900,
            "heightPx": 626,
            "authorAttributions": [
                {
                    "displayName": "XXXXXXX",
                    "uri": "https://maps.google.com/maps/contrib/XXXXXXX",
                    "photoUri": "https://lh3.googleusercontent.com/a-/XXXXXXX"
                }
            ]
      },

迷った点

データを見てみると､ photos[0].authorAttributions[0].photoUri っというパラメータがあります｡このパスをイメージタグなどで読み込めば表示できるのかなぁっと思っていましたがそうではないみたいでした｡

結論

下記のAPIを使えとのこと｡

https://places.googleapis.com/v1/places/PLACE_ID/photos/PHOTO_REFERENCE/media?maxWidthPx=400&key=API_KEY

/places/PLACE_ID/photos/PHOTO_REFERENCE/ のところは､先に取得したデータの photos[0].name を入れる｡実際には下記のようになる｡

<Image
  className="w-full h-40 rounded-t-lg"
  src={
    `https://places.googleapis.com/v1/${place.photos[0].name}/media?key=${process.env.GOOGLE_MAPS_API_KEY}&maxWidthPx=1980`
  }
/>

このとき､ maxWidthPx または maxHightPx のどちらか､もしくは療法を指定する必要があるようです｡

パスのやつでそのままくれたらいいじゃんと思うのですが…
これも料金が別途かかってるのかな…