React-google-maps: Google map get refresh when click on marker to open infowindo

Created on 31 Jul 2018 · 9Comments · Source: tomchentw/react-google-maps

I have an issue with react-google-maps.
When i click on a marker so infowindo opens but the google map get
refresh, it reset its default zoom. but i want if any user make zoom
map and then click marker so map should not reset with its default zoom
, it should stay zoom which user make to see marker. Simply i want that
map should not refresh after click on marker

here is code
class Map extends Component {
constructor(props) {

  super(props);

  this.state = {
    showm:''

  }
}



handleToggleOpen (id) {

  this.setState({
    showm:id
  });
}

handleToggleClose () {
  this.setState({
    showm:''
  });
}

render() {
const GoogleMapExample = withGoogleMap(props => (
defaultCenter = { { lat: 40.752307, lng: -73.912304 } }
defaultZoom = { 10 }
>
{this.props.information.map(marker => (

        <Marker
          position={{ lat: parseFloat(marker.latitude) , lng:parseFloat(marker.longitude)  }}

          onClick={() => this.handleToggleOpen(marker.id)}
        >
          {
        this.state.showm === marker.id &&
       <InfoWindow onCloseClick={this.props.handleCloseCall} defaultOptions= {{ position: [parseFloat(marker.latitude) ,parseFloat(marker.longitude)] }}>
          <div style={{width:'300px' }}>
            <table>
            <tr>
              <td>
                <div className="" style={{padding:'0px' }}>
                  <img style = {{width:'100%','margin-top':'0px'}} alt="" src={"public/uploads/profile_image/" + marker.image} />
                </div>
              </td>
              <td>&nbsp;&nbsp;&nbsp;</td>
              <td>
                <div className="" style={{'margin-top':'7px' }}>
                  <p>Name:{marker.shop_name}</p>
                  <p>Distance:{marker.distance.toFixed(2)}</p>
                  <p>Address:{marker.address}</p>
                </div>
              </td>
            </tr>
            </table>


          </div>

       </InfoWindow>
      }
        </Marker>

    ))}



  </GoogleMap>

));
return(

containerElement={

650px, width: '500px' }} /> }
mapElement={

100% }} /> }
/>

);
}
};

Source

kapilideal

Most helpful comment

Hello!, i was following an example in the doc (https://tomchentw.github.io/react-google-maps/) and i found a way to fix the issue that i had about the reload of the whole map, i wrote my own example in https://codesandbox.io/s/q4vnjyknmj i was declaring the MyMapComponent inside the class, when i move it outside the map area stop to reload after a setState(). Hope this help you. @kapilideal @themakerman

nicolasard on 17 Oct 2018

👍7 😕1 🎉1

All 9 comments

could you format your code so we could read

AonanLi on 31 Jul 2018

when calling setState() your component will re render and you are wrapping GoogleMap component so it will rerender too so you it will use the default center again

mom3d on 9 Aug 2018

Hello @kapilideal , i'm having the same problem, as @med2bled said, it happen because every time you call the setState() function all the component is re-rendered. Im looking for a solution, as soon i found i write it here.

nicolasard on 15 Oct 2018

Imagine you have array of markers....thousands of them? should they be rerendered again if their coords are same? @med2bled Is there any other place where GoogleMap component should be kept besides render method so that it does not markers dont flicker

themakerman on 16 Oct 2018

nicolasard on 17 Oct 2018

👍7 😕1 🎉1

Thanks! This helped me.

Hello!, i was following an example in the doc (https://tomchentw.github.io/react-google-maps/) and i found a way to fix the issue that i had about the reload of the whole map, i wrote my own example in https://codesandbox.io/s/q4vnjyknmj i was declaring the MyMapComponent inside the class, when i move it outside the map area stop to reload after a setState(). Hope this help you. @kapilideal @themakerman

jetaries on 17 Oct 2018

👍1

thanks @nicolasard

tordsta on 29 Mar 2019

👍1

thanks @nicolasard that fixed it for me

pesta on 6 Dec 2019

👍1

Hello everybody. The repo of this project is unmaintained more than a year, and we had build new version https://www.npmjs.com/package/@react-google-maps/api

We had rewrite it to TypeScript, and updating it frequently: https://github.com/JustFly1984/react-google-maps-api/tree/master/packages/react-google-maps-api
You can enjoy autocomplete.

You can see our docs: https://react-google-maps-api-docs.netlify.com/

Also a lot of examples: https://react-google-maps-api-gatsby-demo.netlify.com/ https://github.com/JustFly1984/react-google-maps-api/tree/master/packages/react-google-maps-api-gatsby-example/src/examples

The bundle size is much smaller: https://bundlephobia.com/result?p=@react-google-maps/api@1.8.0

Our Spectrum community: https://spectrum.chat/react-google-maps

Enjoy!