Repository navigation
How to fit bounds of markers #394
Description
Activity
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. });Thanks @cappittall,
I solve my problem by bindingsboundslike 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?
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
I have solved my problem but your technique is cool.
Thanks @cappittallif you're using latest release of the element the attribute is
fit-to-markers(plural)
Unfortunately the doc is not updated :(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 attributeslot="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 suggestedslot="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.
Reacted by Maciek Mikrut
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:
How can I achieve my goal?