0

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

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

Intervalia
  • 10,248
  • 2
  • 30
  • 60
triples13
  • 206
  • 4
  • 18

1 Answers1

2

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.

markers

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.

Ofisora
  • 2,707
  • 2
  • 14
  • 23
  • okk i missed to zoom out, i am using google map api for the first time, but i want to default to zoom it to another location, but everytime i refreshes the page it's zooming in to usa, i tried searching the google-map.html and tried to overiride the property for zoom in center, can you let me know what are the properties to override to zoom to another specific latitude and longitude – triples13 Sep 12 '17 at 08:34
  • You can set latitude and longitude in `google-map` element also. Like ``. I am using one of the position you provided. You can use nearest latitude and longitude. – Ofisora Sep 12 '17 at 09:10