Reposition the center of the map when the location changes?

user_4367242 0
Viewed 13180

Hi folks I'm using the react-google-maps library. I'm trying to recenter my map (zoom where the marker is) every time my location changes, but I'm getting a bit lost on how to implement the whole thing. I can see the marker being updated, but the map stays on its defaultCenter position. 

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
  GoogleMap,
  Marker,
  withScriptjs,
  withGoogleMap
} from 'react-google-maps';

import environment from '../../config/environment';

class Map extends Component {
  static propTypes = {
    defaultZoom: PropTypes.number,
    center: PropTypes.shape({
      lat: PropTypes.number,
      lng: PropTypes.number
    }),
    location: PropTypes.shape({
      lat: PropTypes.number,
      lng: PropTypes.number
    }),
    onPositionChanged: PropTypes.func
  };

  static defaultProps = {
    defaultZoom: 14,
    center: {
      lat: 60.1699,
      lng: 24.9384
    },
    location: {},
    onPositionChanged: () => {}
  };

  constructor(props) {
    super(props);
    this.mapRef = React.createRef((ref) => {
      this.mapRef = ref;
    });
  }

  componenDidUpdate() {
    console.log(`I'm about to update with props: ${JSON.strongify(prevProps, undefined, 2)}`);
  }

  onPositionChanged = (location) => {
    console.log(`This the new location onPositionChange:${JSON.stringify(location, undefined, 2)}`);
    const newLocation = new window.google.maps.LatLng(location.lat, location.lng);
    // [NOTE]: try using the panTo() from googleMaps to recenter the map ? but don't know how to call it.

    return (
      <Marker
        position={newLocation}
      />
    );
  }

  render() {
    const {
      center,
      defaultZoom,
      location,
      onPositionChanged
    } = this.props;

    return (

      <GoogleMap
        className="google-map"
        onClick={onPositionChanged(location)}
        defaultZoom={defaultZoom}
        defaultCenter={center}
        ref={this.mapRef}
      >

        {/* <Marker
          position={location}
        /> */}

        { this.onPositionChanged(location) }
      </GoogleMap>
    );
  }
}

const SchedulerGoogleMap = withScriptjs(withGoogleMap(Map));
const SchedulerMap = props => (
  <SchedulerGoogleMap
    googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${
      environment.GOOGLE_MAPS_API_KEY
    }&v=3`}
    loadingElement={<div style={{ height: '20vh' }} />}
    containerElement={<div style={{ height: '100%' }} />}
    mapElement={<div style={{ height: '20vh', width: '100%' }} />}
    {...props}
  />
);


export { Map, SchedulerMap, SchedulerGoogleMap };
react-google-maps reactjs google-maps
3 Answers

Simply pass the center prop to your GoogleMap component instead of the defaultCenter prop. The center prop is mutable whereas defaultZoom is not.

user_56240610

This is what it seemed to work for me, just in case any other person runs into the same problem. 

... ommited_code

class Map extends Component {

... ommited_code

  componentDidUpdate(prevProps) {
    if (prevProps.location !== this.props.location) {
      this.mapRef.panTo(
        new window.google.maps.LatLng(this.props.location.lat, this.props.location.lng)
      );
    }
  }

  render() {
    const {
      center,
      defaultZoom,
      location
    } = this.props;

    return (

      <GoogleMap
        className="google-map"
        defaultZoom={defaultZoom}
        defaultCenter={center}
        ref={(ref) => {
          this.mapRef = ref;
        }}
      >
        <Marker position={new window.google.maps.LatLng(location.lat, location.lng)} />
      </GoogleMap>
    );
  }
}

...ommited_code
user_43672420

panTo() is a method of the google.maps.Map class. (https://developers.google.com/maps/documentation/javascript/reference/map#Map.panTo)

It seems to be the function you are looking for, so you need to call it on your google map by referencing the className you set for your map, then give the panTo method the LatLang object you created:

window.google.maps.Map(document.getElementsByClassName("google-map")).panTo(newLocation);

user_48672980
Related