Блог

Я действительно не понимаю, почему после нажатия на маркер появляются два информационных окна, странно, что иногда в режиме проверки информационное окно отображается нормально. Мне интересно, не является ли обратный вызов причиной проблемы. Код приведен ниже:

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

const API_KEY = 'INSERT_API_KEY'

const MyMapComponent = withScriptjs(withGoogleMap((props) =>
            <GoogleMap
                defaultZoom={8}
                defaultCenter={{ lat: -33.897, lng: 151.144 }}
                
            >  
                {props.locs.map((location)=>{
                    const onMarkerClick = props.onMarkerClick.bind(this,location)
                    return <Marker 
                            key={nanoid()}
                            position={location}
                            onClick={onMarkerClick}>
                            </Marker>
                            
                })}
                {props.showingInfoWindow amp;amp; 
                    <InfoWindow position={props.activeMarker} onCloseClick={props.markerInfoClose}>
                        <h1>Details</h1>
                    </InfoWindow>}
            </GoogleMap>
            ));

export default class Test extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            locations:[{lat: -33.865143,lng: 151.2},],
            showingInfoWindow: false,
            activeMarker: {}, 
        };
    }
    onMarkerClick = (location) =>{
        this.setState({
            activeMarker: location,
            showingInfoWindow: true
        });
    }
    onClose = () => {
        if (this.state.showingInfoWindow) {
            this.setState({
                activeMarker: null,
                showingInfoWindow: false
            });
        }
    };
    render() {
        console.log(this.state.activeMarker)
        return (
            <div>
                <MyMapComponent
                    locs={this.state.locations}
                    onMarkerClick={this.onMarkerClick}
                    showingInfoWindow={this.state.showingInfoWindow}
                    activeMarker={this.state.activeMarker}
                    markerInfoClose={this.onClose}
                    containerElement={ <div style={{ height: `1000px`, width: '1000px' }} /> } 
                    mapElement={ <div style={{ height: `100%` }} /> }
                    loadingElement={<div style={{ height: `100%` }} />}
                    googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.expamp;libraries=geometry,drawing,placesamp;key=${API_KEY}`}
                >

                </MyMapComponent>
            </div>
        )
    }
}
 

Скриншот: