webcomponents: multiple markers not getting added to google map web components

Question

i am trying to use google map webcomponents and i am trying to add multiple markers to the lat, longs location i followed the question creating a google map with marker using web-component i tried adding multiple markers but the markers are not getting added

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

and i am using map-view inside another div but i am not able to get multiple markers

can anybody show jsfiddle how to add multiple marker to googlemap webcomponents?

Answer 1

The above code works perfectly. You are viewing map of U.S.A. and your markers point to Italy. Zoom out and check in Europe.

If you want to change default view near your markers, you can set latitude and longitude in google-map element also. Like <google-map map="{{map}}" latitude="41.223596" longitude="16.296087" disableDefaultUI fitToMarkers>. I am using one of the position you provided. You can use nearest latitude and longitude.