場所APIを - マーカーアイコンとして場所の写真を取得

Question

私はこのガイドに従う https://developers.google.com/maps/documentation/javascript/places#places_photos 私はマーカーアイコンとして場所の写真を作成する。これは私のマップ初期化コードです：

var map; 

function initMap() { 
    // Create a map centered in Pyrmont, Sydney (Australia). 
     map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: -6.920812, lng: 107.604116}, 
     zoom: 13 
     }); 

     var request = { 
     location: map.getCenter(), 
     radius: '5000', 
     type: ['shopping_mall'] 
     }; 

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

// Checks that the PlacesServiceStatus is OK, and adds a marker 
// using the place ID and location from the PlacesService. 
function callback(results, status) { 
    console.log(results); 
    if (status == google.maps.places.PlacesServiceStatus.OK) { 
     for (var i = 0; i < results.length; i++) { 
     var place = results[i]; 
     createPhotoMarker(place); 
     } 
    } 
} 

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

これは場所の写真が利用できない場合、関数は、定期的なマーカーを作成しますcreatePhotoMarker機能

function createPhotoMarker(place) { 
     var photos = place.photos; 
     if (!photos) { 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: place.geometry.location, 
      title: place.name 
      }); 
      return; 
     } 

     var marker = new google.maps.Marker({ 
     map: map, 
     position: place.geometry.location, 
     title: place.name, 
     icon: photos[0].getUrl({'maxWidth': 35, 'maxHeight': 35}) 
     }); 
} 

です。しかし、利用できる写真のある場所のために、私はこのエラーを取得する：

は、リソースの読み込みに失敗しました：サーバーは、404の状態（と答え） lh3.googleusercontent.com/w35-h35-p/AF1QipOIL6GVVmtqp_cw_hBEQxdILZSa8poMO0HAqFHd=k

地図には通常のマーカのみが表示されます。 どうしたのですか？
これはフィドルhttp://jsfiddle.net/v90fmrhp/

==========アップデート2017年7月7日============答えと修正のための

おかげで
問題が解決したようです。私のフィドルは修正
グッドニュースとしてマーク https://issuetracker.google.com/issues/63298126

を働いています！この問題は修正されました。お待ち頂きまして、ありがとうございます。

ハッピーマッピング！

Answer 1

あなたが見ているエラーは、Google側の問題によって発生しているようです。他の多くのユーザーにも影響を与えており、一般公開の問題追跡ツールをご覧ください。

この問題を報告していただきありがとうございます。私たちはそれを確認し、追跡し続けます。 https://issuetracker.google.com/issues/63298126

UPDATE（2017年7月6日）：

これに対する修正は今、私たちのリリースプロセスに起こっている、それがすぐに出なければなりません - おそらく月曜日遅くとも。 https://issuetracker.google.com/issues/63298126#comment13

Answer 2

は同じ問題を持っていたとSulymanが働いている回避策を提案したが、Googleはこれを修正するとき、私はどのように長い間知りません。ここで

Google Places Photos .GetUrl is adding width and height to url

私たちが何をしたかです。

if(place.photos != null){ 
      for(var i = 0; i < place.photos.length; i++){ 
      //Do a string replace to get the w-h-p out of there. 
      var str = place.photos[i].getUrl({"maxWidth": 100, "maxHeight": 100}); 
      var res = str.replace("w100-h100-p", "p"); 
      self.pacPhotos.push({ 
       id : res 

      }); 

      } 
     }else { 
      console.log("no photo"); 
     } 
     } 

Answer 3

私もgoogle places apiでこれを実行しました。すべてが正常に動作していた後、ランダムに停止しました。それは、彼らがベクトルをサポートするためのより良いマップapiをリリースする準備ができている可能性が高いと思われる

@ SDKinnisonは私がちょうど受け取った場所を解析するための私のES6ソリューションを投稿したい。私はあなたが必要な場合に私が個人的に使用していない他のプロパティをコメントアウトしました。

const PHOTO_WIDTH = 600; 
const PHOTO_HEIGHT = 600; 

export function parseGooglePlace(place) { 
    if (!place) { 
    return; 
    } 
    const { 
    // address_components, 
    formatted_address, 
    geometry, 
    // icon, 
    // id, 
    // international_phone_number, 
    name, 
    // rating, 
    // reviews, 
    // opening_hours, 
    photos: _photos = [], 
    place_id, 
    // reference, 
    types = [], 
    // url: mapsURL, 
    // utc_offset, 
    // vicinity, 
    website, 
    } = place; 

    const photos = _photos.map(p => 
    p 
     .getUrl({ maxWidth: PHOTO_WIDTH, maxHeight: PHOTO_HEIGHT }) 
     .replace(`w${PHOTO_WIDTH}-h${PHOTO_HEIGHT}-p`, 'p'), 
); 

    return { 
    website, 
    name, 
    photos, 
    address: formatted_address, 
    placeId: place_id, 
    geometry, 
    types, 
    }; 
}