CODEWITHSUNDEEP
reactjsgoogle-mapsgoogle-maps-api-3react-google-maps
user944513
user944513

Reputation: 12729

how to set bound property in google map in react?

could you please me how to show polylines on viewport using bounds or getBounds properties?

currently my polyline are visible but I need to zoomout . I want to use bound property to show my line on viewport without zoomout.

here is my code

https://stackblitz.com/edit/react-vagomb

one solution is to reduce the zoom level 8 to 6 it shows some part of line .

but I don't want to use this solution.

using bound I want to do that.

this.setState({
        bounds: null,
        polyLines: [
          { lat: 28.4911778, lng: 77.080109 },
          { lat: 28.49094725, lng: 79.07986154 },
          { lat: 28.49075711, lng: 80.08011527 },
          { lat: 28.4905529, lng: 81.08038778 },
          { lat: 27.49076661, lng: 84.08063851 }
        ],
        center: {
          lat: 29.4911717,
          lng: 77.0800426
        },
        markers: [],
        onMapMounted: ref => {
          refs.map = ref;
        },
        onBoundsChanged: () => {
          this.setState({
            bounds: refs.map.getBounds(),
            center: refs.map.getCenter()
          });
        }

      });

any update ?

Upvotes: 1

Views: 4791

Answers (1)

user11910739
user11910739

Reputation:

If you want to bound the polyline then use bounds.extend to calculate the bounds and then fit it on map.

const bounds = new window.google.maps.LatLngBounds();
props.polyLines.map(x => {
    bounds.extend(new window.google.maps.LatLng(x.lat, x.lng));
});
map && map.fitBounds(bounds)

Here, I have updated your code.
https://stackblitz.com/edit/react-google-maps-bounds

Hope, This will work for you!

Upvotes: 1

Related Questions