Google map get refresh when click on marker to open infowindo

[kapilideal]

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 => ( <GoogleMap 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(

<GoogleMapExample containerElement={ <div style={{ height: 650px, width: '500px' }} /> } mapElement={ <div style={{ height: 100% }} /> } />

); } };

[AonanLi]

could you format your code so we could read

[mom3d]

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

[nicolasard]

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.

[themakerman]

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

[nicolasard]

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]

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

[tordsta]

thanks @nicolasard

[pesta]

thanks @nicolasard that fixed it for me

[JustFly1984]

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/[email protected]

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

Enjoy!