How to fit bounds of markers

[mh2k9]

I'm drawing markers by iteration. I wanna to fit bounds of those markers but I don't know how to do that by this element.

I have tried the following way:

<google-map
	id="layout-map"
	disable-default-ui
	mouse-events="true"
	zoom="3"
	fit-to-marker
	api-key="my_key"
	version="3.exp">
	<template is="dom-repeat" items="{{items}}">
		<google-map-marker
			z-index$="[[index]]"
			latitude="[[item.lat]]"
			longitude="[[item.lng]]"
			click-events="true"
			on-google-map-marker-click="markerClicked"
			label="[[generateLabel(item.formatted_price)]]"
			icon="[[markerIcon(index)]]" >
		</google-map-marker>
	</template>
</google-map>

How can I achieve my goal?

[cappittall]

with

fit-to-marker attribute at like <google-map fit-to-marker ......>

but if but if it's not fit your needs than you may use code in loop of markers;

markers.forEach(marker=> {
    this.bounds.extend(marker.getPosition());  // extends bounds for each of your markers. Hope its works. 
});

[mh2k9]

Thanks @cappittall,
I solve my problem by bindings bounds like the following way

<google-map
  id="layout-map"
  disable-default-ui
  fit-to-marker
  map="{{map}}"
  mouse-events="true"
  zoom="{{zoom}}"
  api-key="my_key"
  version="3.exp">
    <template is="dom-repeat" items="{{items}}">
        <google-map-marker
          latitude="[[item.lat]]"
          longitude="[[item.lng]]"
          click-events="true"
          z-index$="[[index]]"
          bounds="{{bounds}}"
          on-google-map-marker-click="markerClicked"
          label="[[generateLabel(item.formatted_price)]]"
          icon="[[markerIcon(index)]]">
        </google-map-marker>
    </template>
</google-map>

But I gave another probelm of Zoom level. Map is getting zoom out when I change markerscdynamically.

// TODO(ericbidelman): respect user's zoom level.

How to solve my zoom level?

[cappittall]

Sory for my previous unswer need some generation (As I have seen dom-repeat loop lately)
I had the same problem, that I could not fix with the native google-map-marker element, so I have write this;

   <template id="profMarkers" is="dom-repeat" items="{{sprofs}}">
     <span>{{calculateIconType(item)}}</span>
  </template>

at this calculateIconType functions, I created my marker object with and added to markers array, Here my function which I try to clear unnecessary codes.

calculateIconType(f) {
 var icon = {url: f.isFree ?  "../images/t1.png" : "../images/t2.png",
 origin: new google.maps.Point(0, 0),
 labelOrigin: new google.maps.Point(45,15)}
 var shape=  {coords: [38,21,48,32,55,21,99,21,99,1,2,2,2,21],  type: 'poly' }
 this.marker = new google.maps.Marker({
 animation: google.maps.Animation.DROP,
 map:this.map,
 clickable:true,
 position: {
 	lat: f.myLat,
 	lng: f.myLng
 },
 shape: shape,
 icon: icon,
 label: {
 	text: this.calculateNameFormat(f.name),
 	color:(f.isFree ? 'green' : 'red' ),
 	fontWeight: 'bold'
 },
place: {placeId: f.name,  //TODO Change Name S. format 
location: {lat: f.myLat, lng:f.myLng} }

}) 

this.listeners[f.uid] = google.maps.event.addListener(this.marker, 'click', (event)=> {
   this.showUserDetail(f); //shows the user details at another page. 
});
this.markers.push(this.marker);   // this.markers declared at property section as:  value() {return []}
this.marker.setMap(this.map);
this.bounds.extend(this.marker.getPosition());
this.map.fitBounds(this.bounds);
// If only one user exist. Do not zoom in at Zoom level # 22 
if (this.map.getZoom()>11) {
this.map.setZoom(11);
} 
}

you can see the working code at jobijoy.com

[mh2k9]

I have solved my problem but your technique is cool.
Thanks @cappittall

[jonadeline]

if you're using latest release of the element the attribute is fit-to-markers (plural)
Unfortunately the doc is not updated :(

[nidelson]

@mh2k9 The PR #380 was made merge in the master. v2.0.2
It was very clear in the README the use of the fit-to-markers property.
Shall we close this issue?

[vladimirbrasil]

It may be easier to solve:

just add slot="markers" attribute to each of your added <google-map-marker> element.

The full explanation is here.

I'll repeat it here:

Adding slot="marker" attribute to each <google-map-marker> element should solve the issue.

Unfortunately the current example in the google-map component page does not insert this important attribute in each google-map-marker element.

Here is the current, without slot="markers" attribute, code example:

<google-map latitude="37.77493" longitude="-122.41942" fit-to-markers>
    <google-map-marker latitude="37.779" longitude="-122.3892" draggable="true" title="Go Giants!">
    </google-map-marker>
    <google-map-marker latitude="37.777" longitude="-122.38911">
    </google-map-marker>
</google-map>

And below is the suggested corrected example that should be shown in the code (if my suggestion is correct):

<google-map latitude="37.77493" longitude="-122.41942" fit-to-markers>
    <google-map-marker slot="markers" latitude="37.779" longitude="-122.3892" draggable="true" title="Go Giants!">
    </google-map-marker>
    <google-map-marker slot="markers" latitude="37.777" longitude="-122.38911">
    </google-map-marker>
</google-map>

What is happening?

<google-map> does not know when markers are inserted or updated because without the attribute slot="markers" each <google-map-marker> element is inserted outside the slot where they should be inserted in.

Several consequences can happen from this issue: the map can be viewed, but not respond to important events, like fit-to-markers.

In these turbulent moves from original without-slots version to the current slotted version (and soon moving to polymer 3.0 version) of the excellent google-map webcomponent, there is a high chance that the busy developers simply forgot to add this important slot="markers" attribute in the example that shows how to add each new google-map-marker webcomponent inside google-map.

Please correct me if I made wrong conclusions.

You can detect this flaw inspecting your <google-map> element.

Open <google-map> in the inspector. Inside it, open <iron-selector>. Finally, inside it open the element <slot id="markers" name="markers"><slot>. If you do not use the suggested slot="markers" correction, this slot will be empty. If you use this suggested correction, this slot will contain references to each <google-map-marker>. And so the <google-map> element will be able to handle several events that rely on detecting when each marker is inserted or updated.

Sorry for the long answer. Again: please correct me if I made wrong conclusions.