React Google Map API does not zoom in when user presses search for desired address

Question

Here is a snippet of the code, what needs to be changed so when the user clicks search it zooms closer to the address entered? Something similar to the google maps website. The overall aim is to have a similar search ability like that on the google maps website in which when a user searches they are zoomed in to that location.

   const AddressSearchDiv = styled.div`
        position: relative;
         svg {
            position: absolute;
            right: 10px;
            top: 5px;
          }
        `;
        const SeachInput = styled.input`
          width: 100%;
          border: 0;
          background: none;
          padding: 15px 40px 15px 15px;
          font-size: 16px;
          font-weight: 500;
          outline: 0;
          box-shadow: 0;
          @media screen and (max-width: 767px) {
            padding: 20px 40px 20px 40px;
          }
        `;
        const PlacesSearchBox = forwardRef(
          (
            { places, onLocationInputChange, onPlacesChange, onEnterKeyUp, value },
            ref
          ) => {
            const [searchBox, setSearchBox] = useState(null);
            const handlePlacesChanged = () => {
              let address;
              const place = searchBox.getPlaces()[0];
              if (place.address_components) {
                address = mapAddressComponents(place.address_components);
              }
        
              onPlacesChange(address, place);
              onLocationInputChange({
                target: {
                  value: place.formatted_address,
                },
              });
            };
             useEffect(() => {
              if (places.SearchBox && !searchBox) {
                setSearchBox(new places.SearchBox(ref.current));
              }
        
              return () => {
                document.querySelector(".pac-container") &&
                  document.querySelector(".pac-container").remove();
              };
            }, [places.SearchBox, searchBox, ref]);
        
            useEffect(() => {
              if (searchBox) {
                searchBox.addListener("places_changed", handlePlacesChanged);
              }
              // eslint-disable-next-line
            }, [searchBox]);
               return (
              <AddressSearchDiv>
                <SeachInput
                  id="location-input"
                  ref={ref}
                  placeholder="City, State, or Zip code"
                  tabIndex="2"
                  type="text"
                  onChange={onLocationInputChange}
                  onKeyUp={onEnterKeyUp}
                  value={value}
                />
                <MapPinIcon color="#333" size={24} />
              </AddressSearchDiv>
            );
          }
        );
        
        export default PlacesSearchBox;

Answer 1

You can set a state for your center and zoom. Everytime you choose a place from Autocomplete, you will change the state of your center to the chosen place and higher zoom level to view the place upclose.

Here is a sample code and a code snippet below:

/*global google*/
import React, { Component } from "react";
import {
  withGoogleMap,
  withScriptjs,
  GoogleMap,
  Marker
} from "react-google-maps";
import Autocomplete from "react-google-autocomplete";
class Map extends Component {
  state = {
    center: { lat: 40.756795, lng: -73.954298 },
    zoom: 13
  };

  onPlaceSelected = place => {
    this.setState({
      center: place.geometry.location,
      zoom: 18
    });
  };

  render() {
    const Auto = props => (
      <Autocomplete
        style={{ width: "90%" }}
        onPlaceSelected={place => {
          console.log(place);
          this.onPlaceSelected(place);
        }}
        types={["(regions)"]}
      />
    );
    const GoogleMapExample = withGoogleMap(props => (
      <GoogleMap center={this.state.center} zoom={this.state.zoom}>
        <Marker position={this.state.center} />
      </GoogleMap>
    ));

    return (
      <div>
        <div style={{ margin: `15px` }}>
          <h3>Choose another destination</h3>
          <Auto />
        </div>
        <GoogleMapExample
          containerElement={<div style={{ height: `500px`, width: "500px" }} />}
          mapElement={<div style={{ height: `100%` }} />}
        />
      </div>
    );
  }
}

export default Map;