ポリマー1.7で働いていたように、ポリマー＃^ 2.0にGoogleマップを含める方法

Question

ポリマー1.8にアップグレードした後、すべてがポリマー1.7で完璧に動作する前に、apiを含めました^ 2.0 Googleマップはレンダリングしません。 は、ここでは、ポリマークラスベース書かれたメインのアプリページでは私のコードされていますJJ-maps.htmlのコードサンプルで

<iron-pages role="main" selected="[[page]]" attr-for-selected="name" selected-attribute="visible" fallback-selection="404"> 
    <jj-maps name="maps" user="{{user}}" sprof="{{sprof}}"></jj-maps> 
    <jj-list name="list" > Jobs </jj-list> 
    <jj-infos name="infos"> infos  </jj-infos> 
    <jj-contacts name="contacts" > Contacts </jj-contacts> 
    <jj-messages name="messages"> Messages </jj-messages> 
    <jj-404 name="404" > 404   </jj-404> 
</iron-pages> 

は次のとおりです。テンプレートタグで

<link rel="import" href="../bower_components/polymer/polymer.html"> 
<link rel="import" href="../bower_components/google-map/google-map.html"> 
<link rel="import" href="../bower_components/google-map/google-map-marker.html"> 

スタイルコード：

<dom-module id="jj-maps"> 
    <template> 
    <style include="iron-flex iron-flex-alignment"> 
     :host { 
     ..... 
     google-map, #mapResults { 
      margin-top: 10px; 
      position: relative; 
      height: 100vh; 
      width: 100vh%; 
      z-index: 1; 
     } 

....

 <div id="mapResults"> 
     <google-map 
        id="map" 
        map="{{map}}" 
        latitude="[[latitude]]" 
        longitude="[[longitude]]" 
        zoom="10" 
        api-key="[[myApiKey]]" 
        on-google-map-ready= '_mapLoaded' 
        additional-map-options='{"gestureHandling" : "greedy"}' 
        > 
       <google-map-marker map="{{map}}" slot="marker" latitude="{{latitude}}" longitude="{{longitude}}" 
         title="You are here !" icon="./src/image/gpslocc.png" draggable="true"> 
       </google-map-marker> 
       <template is="dom-repeat" items="{{sprof}}" as="item"> 
         <google-map-marker map="[[map]]" slot="marker" latitude="[[item.myLat]]" longitude="[[item.myLng]]" animation="DROP" click-events title="{{item.prof}}" icon="{{calculateIconType(item.isFree)}}" on-google-map-marker-click='showUserDetail' userid="[[item.uid]]" isFree="{{item.isFree}}" > 
         </google-map-marker> 

       </template> 
       <paper-fab icon="maps:my-location" on-tap="updateCurrentPosition"></paper-fab> 
       </google-map> 
     </div> 

    </template> 

このコードは以前のポリマーで完璧に機能します。私は書かれた詳細なコードVEのことを事前に

- Unable to find a suitable version for polymer, please choose one by typing one of the numbers below: 
I chose : 7) polymer#^2.0.0 which resolved to 2.0.1 and is required by myApp 
    - Unable to find a suitable version for webcomponentsjs, please choose one by typing one of the numbers below: 
I chose : 2) webcomponentsjs#^1.0.0 which resolved to 1.0.1 and is required by myApp 

申し訳ありません：私はbower install --save GoogleWebComponents/google-map

亭として依存関係をインストールバウアーもう一つのポイントは、2のように私を尋ねます。その間に私は多くのオプションを試しましたが、jj-maps要素（クラスベーステンプレート、ポリマー1.7のverと同じ）でもマップをレンダリングできませんでした。

ここはコンソール警告です：

dom-module.html:24 dom-module google-map has style outside template 
dom-module google-map-marker has style outside template 

マップが解決する方法、だから... ...

をレンダリングしていない？事前に感謝を。（前回のポリマー版私はまったく同じ問題を抱えているjobijoy.com

Answer 1

で働く。してみました誰かが提案した通りにslot = "marker"をgoogle-map-markerに追加してくださいPolymer 2.0 issue in githubしかし、私のために動作しません。 Googleマップコンポーネントのサイズは0で0に設定されているため、表示されません。 GoogleコンポーネントはPolymer 2.0と互換性があるように更新されていないためです。 bower_componentフォルダのローカルのgoogle-map.htmlとgoogle-map-marker.htmlファイルを手動で更新し、スタイルタグをテンプレートタグに移動しました。警告が消え、地図が表示されます。私たちは、正常に動作するためには、Googleコンポーネントの更新を待たなければならないと思います。私はこれが役立つことを願っています