FitBounds when no marker + default zoom ?

[jscti]

Hi there

The new auto fitBounds is great but it seems 2 improvements could be made :

• when no markers are on the map, fitBounds lands in the middle of Pacific Ocean. Maybe it should do nothing at all ?
• when only 1 marker exists, fitBounds zoom will be maximum, could it be possible to configure a fitBounds.maxZoom that would kick in only for a single marker ?

Bypass is possible but kinda dirty

Thanks

[Pupskuchen]

This affects me as well. I set the center coordinates using latitude and longitude on the agm-map but when fitBounds is enabled it doesn't center to these coordinates (although there is no marker), instead the ocean is shown as described by @jscti.

[ironstine]

+1 on suggestion from @jscti => when no markers are on the map, fitBounds lands in the middle of Pacific Ocean. Maybe it should do nothing at all ?

Does anyone have an idea on how we could achieve 'do nothing all' if there are no markers on the map?

Also huge congrats (A++) and thanks for the library, it's awesome!

[ironstine]

@jscti would you mind sharing how you 'bypass' please?

[jscti]

@ironstine

When no marker, I desactivate fitBounds and force lat/lon/zoom :

this.fitBounds = false;
setTimeout(() => {
    this.latitude = this.DEFAULT_LATITUDE;
    this.longitude = this.DEFAULT_LONGITUDE;
    this.zoom = this.DEFAULT_ZOOM_VAL;
});

If there is a single marker, I force zoom to a specific value

[brianpkelley]

This seems to work well enough for me.

<agm-map [latitude]="locations[0].lat()" [longitude]="locations[0].lng()" [fitBounds]="locations.length > 1" [zoom]="14">
	<ng-template ngFor [ngForOf]="locations" let-location>
		<agm-marker [latitude]="location.lat()" [longitude]="location.lng()" [agmFitBounds]="true"></agm-marker>
	</ng-template>
</agm-map>

[gigallo]

Hi

I have a different problem: my application takes the user lat and long to center the map at the beginning. Then when he starts to compile fields a lot of addresses are geolocalized and then marked on the map. But this is not working with fitbounds for these reasons:

1. if i don't define fitbounds the map is correctly centered at the user location; when the user compiles fields the markers are added but the map doesn't fit bounds;
2. if i define fitbounds to true the map is centered in the middle of the pacific ocean; when the user compiles fields the markers are added but the map zooms out.

Any help? this is my actual code

The html:

<agm-map #agmMap [style.height.px]="utilsService.calculateMapHeight()" [zoom]="13" [streetViewControl]="false" [fitBounds]="true" [latitude]="genericConstants.lat" [longitude]="genericConstants.lng">
    <agm-marker *ngFor="let l of departuresMarkersList" [latitude]="l.lat" [longitude]="l.lng" [title]="l.name" [label]="l.name" [agmFitBounds]="true"></agm-marker>
    <agm-marker *ngFor="let l of destinationsMarkersList" [latitude]="l.lat" [longitude]="l.lng" [title]="l.name" [label]="l.name" [agmFitBounds]="true"></agm-marker>
    <agm-marker *ngIf="cardMarker !== undefined" [latitude]="cardMarker.lat" [longitude]="cardMarker.lng" [title]="cardMarker.name" [label]="cardMarker.name" [agmFitBounds]="true"></agm-marker>
</agm-map>

The ts:

this.utilsService.geoLocalize(fullAddress).then((landmark: Landmark) => {

    const serviceLandmark = new ServiceLandmark(null, type, landmark.lat, landmark.lng, null, null, fullAddress);
    if (type === 'departures') {

          if (this.reopenIndex === -1) {
            this.departuresMarkersList.push(serviceLandmark);
          } else {
            this.departuresMarkersList[this.reopenIndex] = serviceLandmark;
          }

    } else if (type === 'destinations') {

          if (this.reopenIndex === -1) {
            this.destinationsMarkersList.push(serviceLandmark);
          } else {
            this.destinationsMarkersList[this.reopenIndex] = serviceLandmark;
          }

    } else {
          this.cardMarker = serviceLandmark;
    }
}

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Pupskuchen]

The easy way to resolve issues.

[ghost]

1. Ok, so if it has nothing at all, where would the map be centered?
2. Not easy to do, since we need to manage switching from placing map viewport by center, to placing it by bounds

[Pupskuchen]

Hi, sorry, I think my last comment sounded a bit harsh.

I believe there are now three issues in this thread:

1. fitBounds is active, there are no markes

Issue: fitBounds is set to true, but no markers have been added. This results in the map being centered in the middle of the ocean.

I would go with OP's suggestion: if no marker exists (and fitBounds is active), the map shouldn't be centered (as in don't do anything in addition to the default google maps behaviour).

2. fitBounds is active, there is one marker, maximum zoom

Issue: With fitBounds set to true and only one marker, the map will be zoomed in to the maximum level.

This was no issue for me, but I can see use cases in which an option to set a maximum zoom for fitBounds would indeed be useful.

3. fitBounds is active, markers added after initial centering, map zooms out

Issue: When fitBounds is active with no initial markers, the map gets centered to the ocean. If markers are added afterwards, the map only zooms out to show all markers.

I'm not entirely sure I got this one right and what to do about it. Would it be feasible to "just perform the fitBounds" action after zooming out to show all markers? This would result in the map zooming out to show all markers and zooming in again to show only the markers.

Keep it up!

[ghost]

Ok, for 1st case, what does "Doing nothing" mean? What would it be showing?
For second case, it's clear what it should look like, but it's difficult to implement. Also, it's not a common use case to have fitBounds with only one element.

[jscti]

1- Map should not auto center and just stay at the designated latitude/longitude

"Also, it's not a common use case to have fitBounds with only one element."
=> Yeah but when markers comes from a server you don't know if you'll have to display 0,1,n

[ghost]

The problem is that you don't provide designated latitude/longitude when there is fitBounds

[ghost]

Also, how will maxZoom behave when there ARE several points and they are closer to each other than maxZoom allows

[jscti]

The problem is that you don't provide designated latitude/longitude when there is fitBounds

Why not ? It's just that fitBounds ignore it. But when there is no markers, maybe be fitBounds should auto disable itself and use lon/lat
It's the workaround I did manually

Also, how will maxZoom behave when there ARE several points and they are closer to each other than maxZoom allows

We were only talking about the "only one marker case. I understand that both option are not perfect :

• a new "maxZoom" property that should be used only for 1 marker, but if users use it for more markers .. it's their wish/problem and markers may get out of map
• a new "maxZoomForSingleMarker" taht would be use only when there is 1 marker

My workaround for all these cases where to NOT use fitbound for all these specific cases and it's quite ugly when you look at the code, that's why maybe futboud could have nicely handled all of it internally but maybe it's just some "nice-to-have"

[ghost]

the problem with maxZoom or maxZoomForSingleMarker, is that for fitBounds we use Bounds.extend function, which builds a LatLngBounds based on a number of LatLng points. This feature does not accept a zoom level, and it's not very easy to switch from center/zoom to bounds and backwards.

As for providing center lat/lng and fitBounds, it's problematic, because for example it will recenter if the center latlng changes, even if fitBounds are active. Currently we don't recommend it.

[Pupskuchen]

What is google maps' default behaviour when it's shown without fitBounds enabled? I think this is what we desire when there are no markers (and fitBounds is true). This would mean: Just ignore fitBounds if there are no markers.

I think this is the main issue of this thread, maybe separate issues should be opened for other topics (like maxZoom), even if they are related. What do you think?

[ghost]

There is no fitBounds in google, it's all AGM.

[gigallo]

Uhm...I could try

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Pman143]

<agm-map (mapReady)="onMapReady($event)">

onMapReady(event) {
this.mapReady = event;
}

const bounds: LatLngBounds = new google.maps.LatLngBounds();
for (const pol of this.polyLinePoints) {
bounds.extend(new google.maps.LatLng(pol.lat, pol.lng));
}
this.mapReady.fitBounds(bounds);

[d-silvas]

I wanted to share a workaround for issue 1 (map centering in the middle of Pacific Ocean when fitBounds is true and there are no markers).

brianpkelley's answer solves the problem in a way: the map won't not do anything (no pan, no zoom) when you receive a new empty array of markers.

However, if you want to completely reset the map in such case, you can do it like this:

<ng-container *ngIf="markers.length > 0; else noMarkersTemplate">
    <agm-map [fitBounds]="true">
        <!-- Your markers here... -->
    </agm-map>
</ng-container>

<ng-template #noMarkersTemplate>
    <agm-map [latitude]="25" [longitude]="-81" [zoom]="4"></agm-map>
</ng-template>

This will center the map at the point with latitude = 25, longitude = -81, and set the zoom to 4.