react-google-maps map refreshes after onclick

Question

I'm using react-google-maps in a Map component and whenever I click on a marker two odd things happen. First, there is two InfoWindow's opening, one blank one and one with my div. Also, whenever an onclick is performed the map refreshes which is not what I want. I am calling my Map component from App.js.

import React, { useState, Component } from'react';
import { GoogleMap, withScriptjs, withGoogleMap, Marker, InfoWindow } from "react-google-maps";

    function Map(props) {
        const WrappedMap = withScriptjs(withGoogleMap(CreateMap))
        const [selectedPatio, setSelectedPatio] = useState(null)

        function CreateMap(){
            return (
                <GoogleMap
                    defaultZoom={13}
                    defaultCenter={{ lat: 49.278352, lng: -123.122538 }}
                >
                {props.patios.map((patio) => (
                    <Marker 
                        key={patio.name}
                        position={{
                            lat: patio.lat, 
                            lng: patio.lng}}
                        onClick={() => {
                            setSelectedPatio(patio);
                        }}
                    />
                ))}

                {selectedPatio && (
                    <InfoWindow
                    onCloseClick={() => {
                        setSelectedPatio(null);
                    }}
                    position={{
                        lat: selectedPatio.lat,
                        lng: selectedPatio.lng
                    }}
                    >
                    <div>
                        asd
                    </div>
                    </InfoWindow>
                )}
                </GoogleMap>)
        }

        return (
            <WrappedMap
            googleMapURL={'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=gemotry,drawing,places&key=XXX'}
            loadingElement={<div style={{ height: `100%` }} />}
            containerElement={<div style={{ height: `100%` }} />}
            mapElement={<div style={{ height: `100%` }} />}
    />
        );
    }

export default Map

//This is what my render looks like in app.js where i'm calling Map and sending an array of patios to props

render() {
    return (
        <BrowserRouter>      
        <NavBar data={{ icon:"location", text1:"Map", text2:"About"}}></NavBar>
        <div style={{  width: `100vw` , height: `75vh`, maxWidth: `100%` }}>
        <Map patios={this.state.patios}/>
        <div>
          <PatioMasonry patios={this.state.patios}/>
        </div>
        </div>
        <div>
          <BottomNavBar/>
        </div>
        <div>
            <Switch>
              <Route path="/" component={Homescreen} exact/>
           </Switch>
        </div> 
      </BrowserRouter>
    );
  }
}

Answer 1

You are defining a functional component inside another functional component. By doing this, when the parent component re-renders, then a new instance of child component is created and the component is re-mounted instead of re-render. Therefore your map is getting refreshed.

Move your CreateMap component outside of Map component

import React, { useState, Component } from'react';
import { GoogleMap, withScriptjs, withGoogleMap, Marker, InfoWindow } from "react-google-maps";

const WrappedMap = withScriptjs(withGoogleMap(CreateMap))

function CreateMap(){
    const [selectedPatio, setSelectedPatio] = useState(null)    
    return (
        <GoogleMap
            defaultZoom={13}
            defaultCenter={{ lat: 49.278352, lng: -123.122538 }}
        >
        {props.patios.map((patio) => (
            <Marker 
                key={patio.name}
                position={{
                    lat: patio.lat, 
                    lng: patio.lng}}
                onClick={() => {
                    setSelectedPatio(patio);
                }}
            />
        ))}

        {selectedPatio && (
            <InfoWindow
            onCloseClick={() => {
                setSelectedPatio(null);
            }}
            position={{
                lat: selectedPatio.lat,
                lng: selectedPatio.lng
            }}
            >
            <div>
                asd
            </div>
            </InfoWindow>
        )}
        </GoogleMap>)
}
    function Map(props) {

        return (
            <WrappedMap
            googleMapURL={'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=gemotry,drawing,places&key=XXX'}
            loadingElement={<div style={{ height: `100%` }} />}
            containerElement={<div style={{ height: `100%` }} />}
            mapElement={<div style={{ height: `100%` }} />}
            />
        );
    }

export default Map