componentDidMount() {
        this.setState({isLoading: true});

        fetch('/api/alert', {credentials: 'include'})
            .then(response => response.json())
            .then(data => this.setState({alerts: data, isLoading: false}))
            .catch(() => this.props.history.push('/'));

        if (navigator.geolocation) {
            navigator.geolocation.watchPosition((position) => {
                this.setState({currentPos: {lat: 53.10, lng: 18}})
            },
                (error) => this.setState({ error: error.message }),
                { enableHighAccuracy: false, timeout: 100000, maximumAge: 1000 },)
        }
    }

    render() {
        console.log(this.state)
        const MapWithAMarker = withScriptjs(withGoogleMap(props =>
            <GoogleMap
                defaultZoom={8}
                defaultCenter={this.state.currentPos}
                options={{
                    styles:mapStyles,
                    disableDefaultUI: true,
                }}

            >
                <Marker
                    position={this.state.currentPos}
                    icon={{
                        url: '/position.svg',
                        scaledSize: new google.maps.Size(35, 35)
                    }
                    }/>

                {this.state.alerts.filter(alert => alert.current && alert.latitude && alert.longitude).map((alert) => (
                    <Marker key={alert.id} position={{lat: alert.latitude, lng: alert.longitude}} icon={
                        {
                            url: '/alert.svg',
                            scaledSize: new google.maps.Size(35, 35)
                        }
                    }/>
                ))}
            </GoogleMap>
        ));