Google Map will not recenter when state / props changes

Here is a copy of my component

import React, { Component } from 'react';
import shouldPureComponentUpdate from 'react-pure-render/function';

import GoogleMap from 'google-map-react';
import Place from 'material-ui-icons/Place';


export default class SimpleMapPage extends Component {

    static defaultProps = {
        center: { lat: 40.7608, lng: -111.8910 },
        zoom: 9,
    };

    shouldComponentUpdate = shouldPureComponentUpdate;

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <GoogleMap
                apiKey=//API KEY
                center={this.props.center}
                zoom={this.props.zoom}>
                <div lat={this.props.center.lat} lng={this.props.center.lng}>
                    <Place />
                </div>
            </GoogleMap>
        );
    }
}

The div updates when this.props.center changes but center does not update.

I have tried using "onGoogleApiLoaded" with "yesIWantToUseGoogleMapApiInternals". I have tried to keep the dom elements from rendering until the updated center has been set on state.

Any help on this would be greatly appreciated. Thanks!

@BenAhlander

@BenAhlander Try this:

const bindResizeListener = (map, maps, bounds) => {
  maps.event.addDomListenerOnce(map, 'idle', () => {
    maps.event.addDomListener(window, 'resize', () => {
      map.fitBounds(bounds);
    });
  });
};

const apiIsLoaded = (map, maps) => {
  if (map) {
    const bounds = new maps.LatLngBounds();
    map.fitBounds(bounds);
    bindResizeListener(map, maps, bounds);
  }
};

const GoogleMap = props => (
  <GoogleMapReact
    zoom={props.zoom}
    center={props.center}
    bootstrapURLKeys={{
      key: [YOUR_KEY],
      language: 'en',
    }}
    yesIWantToUseGoogleMapApiInternals
    onGoogleApiLoaded={({ map, maps }) => apiIsLoaded(map, maps)}
  >
    {props.children}
  </GoogleMapReact>
);

@BenAhlander

@BenAhlander Any luck? Please reopen issue if its still an issue.

I have the same problem, I get my data from a websocket connection, then I do this:

componentDidMount() {
  this.socket.on('my-data', myData => {
    this.setState({center: myData.center})/
  })
}

render() {
  return (
    <MyMap center={this.state.center} >
  );
}

I can show the new location but the map is still at the old location

@ivanquirino

@ivanquirino You're updating your state in componentDidMount but render is not going to be triggered , the problem is the way you're using react lifecycle. Please check #546 (comment)

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Navigation Menu

Google Map will not recenter when state / props changes #512

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Google Map will not recenter when state / props changes #512

Description

Activity

itsmichaeldiego commented on Feb 16, 2018

itsmichaeldiego commented on Mar 8, 2018

ivanquirino commented on May 17, 2018

itsmichaeldiego commented on May 17, 2018

lock commented on Dec 1, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions