Google Map Picker

google_map_picker.js

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;