How to fit bounds of markers
mh2k9 opened this issue · comments
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?
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 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?
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 @cappittall
if 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 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.