2017-05-07 14 views
4

Googleマップの場所を示すリアクションコンポーネントに単純なiframeを作成しようとしています。私は現在、このようなsrcをハードコーディングしています。反応コンポーネント内でiframeを渡す方法

this.state.features.map(function(school){ 
    return(
     <div> 
      {school.name} 
      <div> 
      <iframe frameBorder="0" style={{ width: "100%", height: "450"}} 
       src="https://www.google.com/maps/embed/v1/place?q=40.7127837,-74.0059413&amp;key=AIzaSyCc3zoz5TZaG3w2oF7IeR-fhxNXi8uywNk"> 
      </iframe> 
      </div> 
     </div> 
    ) 
}) 

これはうまくいくようです。しかし、私はので、私はこの

const MY_API = AIzaSyCc3zoz5TZaG3w2oF7IeR-fhxNXi8uywNk 

let _url = "https://www.google.com/maps/embed/v1/place?q=40.7127837,-74.0059413&amp;key="+MY_API; 

してから、この

<iframe frameBorder="0" style={{ width: "100%", height: "450"}} 
     src={_url}> 
</iframe> 

のように動的にSRCを渡すことが、今、私は次のようなエラー

を得るようなことをやって反応する変数 を使用してSCRを通過したいです

Google Maps APIサーバーがリクエストを拒否しました。無効なリクエスト。 予期しないパラメータ 'amp%3Bkey'

エラーメッセージの内容は不明です。助けてください。

答えて

2

試してみてください、この(私はまだ質問にコメントすることができません)

const MY_API = 'AIzaSyCc3zoz5TZaG3w2oF7IeR-fhxNXi8uywNk' 
let _url = `https://www.google.com/maps/embed/v1/place?key=${MY_API}&q=40.7127837,-74.0059413` 

以上使用しているES6 template literals

+0

魔法のように動作します:) – Shadid

関連する問題