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지도를 용지 대화 상자에 포함하면 초는 나타나지 않지만지도를 삭제하면 제대로 작동합니다. 이 코드 외부에 Google지도를 작성하는 경우 (예 : 종이 대화 상자,지도 및 대화 상자 작업 후). 폴리머 대화 상자 내부의지도를 사용한 예는 도움이되지 않았습니다.

Answer 1

콘솔을 보면 "API 키 누락"경고가 표시 될 수 있습니다. 당신은 여기에 API 키를 얻을 필요가 :

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

이 그런 다음 구글 맵 구성 요소에 API 키를 제공합니다 : 당신은 당신의 google-에 대한 정확한 높이/폭을 지정해야 할 수 있습니다

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

확인이 대화 상자에 표시입니다 수 있도록지도 :

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>