Created
February 24, 2017 05:16
-
-
Save waitonza/a26e29e1f09c2427e89a6a38b146378e to your computer and use it in GitHub Desktop.
Google Map Picker
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { default as React, Component } from "react"; | |
| import { default as update } from "react-addons-update"; | |
| import { GoogleMapLoader, GoogleMap, Marker, SearchBox } from "react-google-maps"; | |
| import { triggerEvent } from "react-google-maps/lib/utils"; | |
| class GoogleMapPicker extends Component { | |
| static inputStyle = { | |
| "border": `1px solid transparent`, | |
| "borderRadius": `1px`, | |
| "boxShadow": `0 2px 6px rgba(0, 0, 0, 0.3)`, | |
| "boxSizing": `border-box`, | |
| "MozBoxSizing": `border-box`, | |
| "fontSize": `11px`, | |
| "height": `32px`, | |
| "marginTop": `9px`, | |
| "outline": `none`, | |
| "padding": `0 12px`, | |
| "textOverflow": `ellipses`, | |
| "width": `400px`, | |
| "background-color": `white` | |
| } | |
| handleMapClick(event) { | |
| var myPosition = {lat: event.latLng.lat(), lng: event.latLng.lng()}; | |
| this.props.onLocUpdate(myPosition); | |
| } | |
| handlePlacesChanged(event) { | |
| const places = this.refs.searchBox.getPlaces(); | |
| var myPosition = {lat: places[0].geometry.location.lat(), lng: places[0].geometry.location.lng()}; | |
| this.refs.map.panTo(myPosition); | |
| this.props.onLocUpdate(myPosition); | |
| } | |
| updateCenter() { | |
| if (this.refs.map) { | |
| this.refs.map.panTo({lat: this.props.lat, lng: this.props.lon}); | |
| } | |
| } | |
| componentDidMount() { | |
| window.addEventListener(`resize`, this.handleWindowResize.bind(this)); | |
| } | |
| componentWillUnmount() { | |
| window.removeEventListener(`resize`, this.handleWindowResize.bind(this)); | |
| } | |
| handleWindowResize() { | |
| this.updateCenter(); | |
| } | |
| render() { | |
| return ( | |
| <GoogleMapLoader | |
| containerElement={ <div style={{ width: "100%", height: "100%"}} />} | |
| googleMapElement={ | |
| <GoogleMap | |
| ref="map" | |
| defaultZoom={14} | |
| defaultCenter={{lat: this.props.lat, lng: this.props.lon}} | |
| options={{scrollwheel: false}} | |
| onClick={this.handleMapClick.bind(this)} > | |
| <SearchBox | |
| controlPosition={google.maps.ControlPosition.TOP_LEFT} | |
| onPlacesChanged={this.handlePlacesChanged.bind(this)} | |
| ref="searchBox" | |
| placeholder="ค้นหาสถานที่ (ใช้ Mouse คลิก/กด เลือกข้อมูลเท่านั้น)" | |
| style={GoogleMapPicker.inputStyle} | |
| /> | |
| <Marker | |
| position={{ | |
| lat: this.props.lat, | |
| lng: this.props.lon, | |
| }} | |
| defaultAnimation={2} | |
| key={Date.now()} /> | |
| </GoogleMap> | |
| } | |
| /> | |
| ); | |
| } | |
| } | |
| export default GoogleMapPicker; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment