2017-09-11 13 views
0

GoogleマップWebコンポーネントを使用しようとしていますが、私はlat、longsの場所に複数のマーカーを追加しようとしています。creating a google map with marker using web-componentマーカーwebcomponents:複数のマーカーがGoogleマップのWebコンポーネントに追加されない

<link rel="import" href="../../bower_components/polymer/polymer.html"> 
<link rel="import" href="../../bower_components/google-apis/google- 
    apis.html"> 
    <link rel="import" href="../../bower_components/google-map/google- 
    map.html"> 
    <dom-module id="map-view"> 
    <template> 
    <google-map map="{{map}}" disableDefaultUI fitToMarkers> 
     <template is="dom-repeat" items="{{marker}}"> 
      <google-map-marker map={{map}} latitude="{{item.latitudine}}" 
      longitude="{{item.longitudine}}"> 
      </google-map-marker> 
     </template> 
    </google-map> 
    </template> 
    <script> 
    Polymer({ 
    is:'map-view', 
    properties:{ 
    marker:{ 
    type:Array 
    } 
    }, 
    ready: function() { 
     this.marker = [ 
      {latitudine: '41.223596', longitudine: '16.296087'}, 
      {latitudine: '41.222450', longitudine: '16.291259'} 
     ]; 
    } 
    }); 
</script> 

</dom-module> 

を追加取得していないと私は別のdiv内のマップビューを使用していますが、私は複数のマーカーにno marker

を取得することはできませんよ誰もがwebcomponentsをGoogleマップするために、複数のマーカーを追加する方法をjsfiddle表示することができますか?

答えて

2

上記のコードは完全に機能します。あなたは米国の地図を表示しています。マーカーはイタリアを指しています。ズームアウトし、ヨーロッパをチェックインします。

markers

あなたのマーカーの近くに既定のビューを変更したい場合は、google-map要素に緯度と経度を設定することができます。 <google-map map="{{map}}" latitude="41.223596" longitude="16.296087" disableDefaultUI fitToMarkers>のように。あなたが提供したポジションの1つを使用しています。最も近い緯度と経度を使用できます。

+0

okk私は初めてGoogleマップAPIを使用していますが、別の場所にズームするようにデフォルト設定したいのですが、毎回私がズームしているページを更新しています。 -map.htmlとズームインセンターのプロパティをオーバーライドしようとすると、別の特定の緯度と経度にズームするためにオーバーライドするプロパティを教えてください。 – shashank

+0

'google-map'要素でも緯度と経度を設定できます。 ''と同様です。あなたが提供したポジションの1つを使用しています。最も近い緯度と経度を使用できます。 – Ofisora

+0

私は間違った方法をとっていた – shashank

関連する問題