Google Polymer：紙のダイアログがGoogleマップ内で動作しない

Question

   <paper-button onclick="map.open()">Central Park</paper-button> 
       <paper-dialog id="map" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop> 
        <div class="dialog-map"> 
         <h>sdoihsdf</h> 
         <google-map latitude="37.77493" longitude="-122.41942" fit-to-markers></google-map> 
        </div> 
       </paper-dialog> 

私は紙のダイアログにgoogle-mapを含めると2番目は表示されませんが、地図を削除するとすべて正常に動作します。たとえば、紙のダイアログ、マップ、ダイアログの後に、このコードの外にGoogleマップを書き込むとします。

Answer 1

コンソールを見ると「APIキーが見つからない」という警告が表示される可能性があります。あなたはここにAPIキーを取得する必要があります。

https://developers.google.com/maps/documentation/javascript/get-api-key

続いてGoogleマップコンポーネントにAPIキーを提供します。

<google-map 
    api-key="[[yourApiKeyHere]]" 
    latitude="37.77493" 
    longitude="-122.41942" 
    fit-to-markers> 
</google-map> 

あなたはgoogle-のための正確な高さ/幅を指定する必要があります必ずそれは、ダイアログに表示さだようにするマップ：

google-map { 
    height: 200px; 
    width: 300px; 
} 

私は地元のデモの作業を取得することができました：

<dom-module id="map-dialog"> 
    <template> 
    <style> 
     :host { 
     display: block; 
     } 

     google-map { 
     height: 200px; 
     width: 300px; 
     } 
    </style> 

    <paper-dialog id="dialog"> 
     <google-map 
     api-key="[[apiKey]]" 
     latitude="37.77493" 
     longitude="-122.41942" 
     fit-to-markers></google-map> 
    <paper-dialog> 
    </template> 

    <script> 
    Polymer({ 

     is: 'map-dialog', 

     properties: { 
     apiKey: { 
      type: String, 
      value: function() { 
      // Return your API key here!! 
      } 
     }, 
     }, 

     ready() { 
     this.$.dialog.open(); 
     } 

    }); 
    </script> 
</dom-module>