Google Polymer: paper-dialog无法在google-map inside中使用

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加入到纸质对话框中时，没有显示second，但当我删除地图时，一切都正常工作。如果在此代码之外编写google-map，例如在paper-dialog之后，map和dialog就可以工作。关于聚合物的map inside对话框的示例，我还没有见过，请帮助

Answer 1

如果您查看控制台，可能会收到"missing API key“警告。您需要在此处获取API密钥：

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

然后将您的API密钥提供给google-map组件：

<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>