{"version":3,"sources":["Demo/Maps/GoogleMap/index.js"],"names":["polygon","lat","lng","GoogleMap","state","activeMarker","selectedPlace","showingInfoWindow","position","onMarkerClick","props","marker","_this","setState","onInfoWindowClose","onMapClicked","this","renderAutoComplete","prevProps","map","e","preventDefault","_this2","_this$props","google","autocomplete","maps","places","Autocomplete","bindTo","addListener","place","getPlace","geometry","viewport","fitBounds","setCenter","location","setZoom","_this3","react__WEBPACK_IMPORTED_MODULE_5___default","a","createElement","_hoc_Aux__WEBPACK_IMPORTED_MODULE_13__","react_bootstrap__WEBPACK_IMPORTED_MODULE_6__","react_bootstrap__WEBPACK_IMPORTED_MODULE_7__","xl","react_bootstrap__WEBPACK_IMPORTED_MODULE_8__","Header","Title","as","Body","style","height","width","google_maps_react__WEBPACK_IMPORTED_MODULE_12__","centerAroundCurrentLocation","className","zoom","name","onClick","onClose","visible","react_bootstrap__WEBPACK_IMPORTED_MODULE_9__","onSubmit","react_bootstrap__WEBPACK_IMPORTED_MODULE_10__","Control","ref","type","placeholder","Append","react_bootstrap__WEBPACK_IMPORTED_MODULE_11__","Object","assign","center","fillColor","fillOpacity","paths","strokeColor","strokeOpacity","strokeWeight","path","React","Component","GoogleApiWrapper","apiKey"],"mappings":"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","file":"static/js/136.db9df314.chunk.js","sourcesContent":["import React from 'react';\r\nimport {Row, Col, Card, Form, InputGroup, Button} from 'react-bootstrap';\r\nimport {Map, Marker, GoogleApiWrapper, InfoWindow, Polyline, Polygon}  from 'google-maps-react';\r\n\r\nimport Aux from \"../../../hoc/_Aux\";\r\n\r\nconst polygon = [\r\n    { lat: 21.2105052, lng: 72.8653491 },\r\n    { lat: 21.2206445, lng: 72.8704506 },\r\n    { lat: 21.2183091, lng: 72.8631228 }\r\n];\r\n\r\nclass GoogleMap extends React.Component {\r\n\r\n    state = {\r\n        activeMarker: {},\r\n        selectedPlace: {},\r\n        showingInfoWindow: false,\r\n        position: null\r\n    };\r\n\r\n    onMarkerClick = (props, marker) =>\r\n        this.setState({\r\n            activeMarker: marker,\r\n            selectedPlace: props,\r\n            showingInfoWindow: true\r\n        });\r\n\r\n    onInfoWindowClose = () =>\r\n        this.setState({\r\n            activeMarker: null,\r\n            showingInfoWindow: false\r\n        });\r\n\r\n    onMapClicked = () => {\r\n        if (this.state.showingInfoWindow)\r\n            this.setState({\r\n                activeMarker: null,\r\n                showingInfoWindow: false\r\n            });\r\n    };\r\n\r\n    componentDidMount() {\r\n        this.renderAutoComplete();\r\n    }\r\n\r\n    componentDidUpdate(prevProps) {\r\n        if (this.props !== prevProps.map) this.renderAutoComplete();\r\n    }\r\n\r\n    onSubmit(e) {\r\n        e.preventDefault();\r\n    }\r\n\r\n    renderAutoComplete() {\r\n        const { google, map } = this.props;\r\n\r\n        if (!google || !map) return;\r\n\r\n        const autocomplete = new google.maps.places.Autocomplete(this.autocomplete);\r\n        autocomplete.bindTo('bounds', map);\r\n\r\n        autocomplete.addListener('place_changed', () => {\r\n            const place = autocomplete.getPlace();\r\n\r\n            if (!place.geometry) return;\r\n\r\n            if (place.geometry.viewport) map.fitBounds(place.geometry.viewport);\r\n            else {\r\n                map.setCenter(place.geometry.location);\r\n                map.setZoom(17);\r\n            }\r\n\r\n            this.setState({ position: place.geometry.location });\r\n        });\r\n    }\r\n\r\n\r\n    render() {\r\n        const { position } = this.state;\r\n\r\n        return (\r\n            <Aux>\r\n                <Row>\r\n                    <Col xl={6}>\r\n                        <Card>\r\n                            <Card.Header>\r\n                                <Card.Title as=\"h5\">Basic</Card.Title>\r\n                            </Card.Header>\r\n                            <Card.Body>\r\n                                <div style={{height: '300px', width: '100%'}}>\r\n                                    <Map\r\n                                        centerAroundCurrentLocation\r\n                                        className=\"map\"\r\n                                        google={this.props.google}\r\n                                        zoom={14}\r\n                                    />\r\n                                </div>\r\n                            </Card.Body>\r\n                        </Card>\r\n                    </Col>\r\n                    <Col xl={6}>\r\n                        <Card>\r\n                            <Card.Header>\r\n                                <Card.Title as=\"h5\">Simple Markers</Card.Title>\r\n                            </Card.Header>\r\n                            <Card.Body>\r\n                                <div style={{height: '300px', width: '100%'}}>\r\n                                    <Map\r\n                                        centerAroundCurrentLocation\r\n                                        google={this.props.google}\r\n                                        className=\"map\"\r\n                                        zoom={13}>\r\n                                        <Marker\r\n                                            name=\"Codedthemes\"\r\n                                            position={{ lat: 21.2335163, lng: 72.8643298 }}\r\n                                        />\r\n\r\n                                        <Marker\r\n                                            name=\"Roman Point\"\r\n                                            position={{ lat: 21.2148165, lng: 72.8627243 }}\r\n                                        />\r\n\r\n                                        <Marker />\r\n                                    </Map>\r\n                                </div>\r\n                            </Card.Body>\r\n                        </Card>\r\n                    </Col>\r\n                    <Col xl={6}>\r\n                        <Card>\r\n                            <Card.Header>\r\n                                <Card.Title as=\"h5\">Click-Able Markers</Card.Title>\r\n                            </Card.Header>\r\n                            <Card.Body>\r\n                                <div style={{height: '300px', width: '100%'}}>\r\n                                    <Map\r\n                                        centerAroundCurrentLocation\r\n                                        className=\"map\"\r\n                                        google={this.props.google}\r\n                                        onClick={this.onMapClicked}\r\n                                        zoom={12}>\r\n\r\n                                        <Marker\r\n                                            name=\"Codedthemes\"\r\n                                            position={{ lat: 21.2335163, lng: 72.8643298 }}\r\n                                            onClick={this.onMarkerClick}\r\n                                        />\r\n\r\n                                        <Marker\r\n                                            name=\"Roman Point\"\r\n                                            position={{ lat: 21.2148165, lng: 72.8627243 }}\r\n                                            onClick={this.onMarkerClick}\r\n                                        />\r\n\r\n                                        <Marker name=\"Current Location\" onClick={this.onMarkerClick} />\r\n\r\n                                        <InfoWindow\r\n                                            marker={this.state.activeMarker}\r\n                                            onClose={this.onInfoWindowClose}\r\n                                            visible={this.state.showingInfoWindow}>\r\n                                            <div>\r\n                                                <h3>{this.state.selectedPlace.name}</h3>\r\n                                            </div>\r\n                                        </InfoWindow>\r\n                                    </Map>\r\n                                </div>\r\n                            </Card.Body>\r\n                        </Card>\r\n                    </Col>\r\n                    <Col xl={6}>\r\n                        <Card>\r\n                            <Card.Header>\r\n                                <Card.Title as=\"h5\">Geo-Coding</Card.Title>\r\n                            </Card.Header>\r\n                            <Card.Body>\r\n                                <Form onSubmit={this.onSubmit}>\r\n                                    <InputGroup className=\"mb-3\">\r\n                                        <Form.Control ref={ref => (this.autocomplete = ref)} type='text' placeholder='Search your favorite place' />\r\n                                        <InputGroup.Append>\r\n                                            <Button type=\"submit\">Search</Button>\r\n                                        </InputGroup.Append>\r\n                                    </InputGroup>\r\n                                </Form>\r\n                                <div style={{height: '240px', width: '100%'}}>\r\n                                    <Map\r\n                                        className='map'\r\n                                        {...this.props}\r\n                                        center={position}\r\n                                        centerAroundCurrentLocation >\r\n                                        <Marker position={position} />\r\n                                    </Map>\r\n                                </div>\r\n                            </Card.Body>\r\n                        </Card>\r\n                    </Col>\r\n                    <Col xl={6}>\r\n                        <Card>\r\n                            <Card.Header>\r\n                                <Card.Title as=\"h5\">Polygon</Card.Title>\r\n                            </Card.Header>\r\n                            <Card.Body>\r\n                                <div style={{height: '300px', width: '100%'}}>\r\n                                    <Map\r\n                                        centerAroundCurrentLocation\r\n                                        google={this.props.google}\r\n                                        className=\"map\"\r\n                                        zoom={14}>\r\n                                        <Polygon\r\n                                            fillColor=\"#dc3545\"\r\n                                            fillOpacity={0.35}\r\n                                            paths={[polygon]}\r\n                                            strokeColor=\"#dc3545\"\r\n                                            strokeOpacity={0.8}\r\n                                            strokeWeight={2}\r\n                                        />\r\n                                    </Map>\r\n                                </div>\r\n                            </Card.Body>\r\n                        </Card>\r\n                    </Col>\r\n                    <Col xl={6}>\r\n                        <Card>\r\n                            <Card.Header>\r\n                                <Card.Title as=\"h5\">Polyline</Card.Title>\r\n                            </Card.Header>\r\n                            <Card.Body>\r\n                                <div style={{height: '300px', width: '100%'}}>\r\n                                    <Map\r\n                                        centerAroundCurrentLocation\r\n                                        google={this.props.google}\r\n                                        className=\"map\"\r\n                                        zoom={14}>\r\n                                        <Polyline\r\n                                            fillColor=\"#dc3545\"\r\n                                            fillOpacity={0.35}\r\n                                            path={polygon}\r\n                                            strokeColor=\"#dc3545\"\r\n                                            strokeOpacity={0.8}\r\n                                            strokeWeight={5}\r\n                                        />\r\n                                    </Map>\r\n                                </div>\r\n                            </Card.Body>\r\n                        </Card>\r\n                    </Col>\r\n                </Row>\r\n            </Aux>\r\n        );\r\n    }\r\n}\r\n\r\nexport default GoogleApiWrapper({\r\n    apiKey: 'AIzaSyCE0nvTeHBsiQIrbpMVTe489_O5mwyqofk'\r\n})(GoogleMap);"],"sourceRoot":""}