谷歌聚合物：紙對話框不會與谷歌地圖裏面

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> 

工作時，我包括谷歌地圖到紙對話，第二個沒有出現，但是當我刪除地圖，一切工作正常。如果在此代碼之外寫入谷歌地圖，例如在紙質對話框，地圖和對話框之後工作。聚合物地圖裏面的對話框的例子我還沒有看到，請幫助

Answer 1

如果你看看控制檯，你可能會得到一個「缺少API鍵」的警告。你需要在這裏得到一個API密鑰：

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

然後提供您的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>