react-google-maps-search

import React, { Component } from "react";
import ReactDOM from "react-dom";

const _ = require("lodash");
const { compose, withProps, lifecycle } = require("recompose");
const {
    withScriptjs,
    withGoogleMap,
    GoogleMap,
    Marker
} = require("react-google-maps");
const {
    SearchBox
} = require("react-google-maps/lib/components/places/SearchBox");

const MapWithASearchBox = compose(
    withProps({
        googleMapURL:
            "https://maps.googleapis.com/maps/api/js?key=API_KEY&v=3.exp&libraries=geometry,drawing,places",
        loadingElement: <div style={{ height: `100%` }} />,
        containerElement: <div style={{ height: `400px` }} />,
        mapElement: <div style={{ height: `100%` }} />
    }),
    lifecycle({
        componentWillMount() {
            const refs = {};

            this.setState({
                bounds: null,
                center: {
                    lat: -6.2621483,
                    lng: 106.8267923
                },
                markers: [],
                onMapMounted: ref => {
                    refs.map = ref;
                },
                onBoundsChanged: () => {
                    this.setState({
                        bounds: refs.map.getBounds(),
                        center: refs.map.getCenter()
                    });
                },
                onSearchBoxMounted: ref => {
                    refs.searchBox = ref;
                },
                onPlacesChanged: () => {
                    console.log('halo')
                    const places = refs.searchBox.getPlaces();
                    const bounds = new window.google.maps.LatLngBounds();

                    places.forEach(place => {
                        if (place.geometry.viewport) {
                            bounds.union(place.geometry.viewport);
                        } else {
                            bounds.extend(place.geometry.location);
                        }
                    });
                    const nextMarkers = places.map(place => ({
                        position: place.geometry.location
                    }));
                    const nextCenter = _.get(
                        nextMarkers,
                        "0.position",
                        this.state.center
                    );

                    this.setState({
                        center: nextCenter,
                        markers: nextMarkers
                    });
                    // refs.map.fitBounds(bounds);
                },
                onMarkerDragEnd: (coord, index) => {
                    const { latLng } = coord;
                    const lat = latLng.lat();
                    const lng = latLng.lng();
                    console.log(111);
                    this.setState(prevState => {
                        const markers = [...this.state.markers];
                        markers[index] = {
                            ...markers[index],
                            position: { lat, lng }
                        };
                        return { markers };
                    });
                }
            });
        }
    }),
    withScriptjs,
    withGoogleMap
)(props => (
    <GoogleMap
        ref={props.onMapMounted}
        defaultZoom={13}
        center={props.center}
        onBoundsChanged={props.onBoundsChanged}
        options={{
            streetViewControl: false,
            // styles: "mapsStyle"
            keyboardShortcuts: false,
            scaleControl: false,
            scrollwheel: true,
            disableDefaultUI: true,
            gestureHandling: 'greedy'
        }}
    >
        <SearchBox
            ref={props.onSearchBoxMounted}
            bounds={props.bounds}
            controlPosition={window.google.maps.ControlPosition.TOP_LEFT}
            onPlacesChanged={props.onPlacesChanged}
        >
            <input
                type="text"
                placeholder="find your address"
                style={{
                    boxSizing: `border-box`,
                    border: `1px solid transparent`,
                    width: `97%`,
                    height: `35px`,
                    marginTop: `2px`,
                    marginBottom: `0px`,
                    marginRight: `5px`,
                    marginLeft: `5px`,
                    padding: `0 12px`,
                    borderRadius: `3px`,
                    boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
                    fontSize: `14px`,
                    outline: `none`,
                    textOverflow: `ellipses`
                }}
            />
        </SearchBox>
        {props.markers.map((marker, index) => (
            <Marker
                key={index}
                position={marker.position}
                draggable={true}
                onDragEnd={props.onDragMarker}
            />
        ))}
    </GoogleMap>
));

class MapThree extends Component{
    constructor(props) {
        super(props);
        this.state = {
            markers1: [
                {
                    name: "Current position",
                    position: {
                        lat: -6.2621483,
                        lng: 106.8267923
                    }
                }
            ]
        };
    }

    onMarkerDragEnd = (coord, index) => {
        const { latLng } = coord;
        const lat = latLng.lat();
        const lng = latLng.lng();

        this.setState({
            ...this.state.markers1[index],
            position: { lat, lng }
        });
    };
    render() {
        return (
            <div className="App">
                <MapWithASearchBox
                    onDragMarker={this.onMarkerDragEnd.bind(this)}
                />
            </div>
        );
    }
}

export default MapThree