[React] 주소만 입력하면 OK인 Google map컴포넌트

업무 속에서 recompose를 사용하여 재사용 가능한 Google Map 컴포넌트를 만들었으므로, 향후 사용도가 있을 때에 메모.

원형 복사에서 사용할 수 있습니다.
오류 처리도 있습니다.

좀 더 똑똑한 쓰는 법이 있으면 알려주세요. .

완성형





npm


// React、PropTypesは省略します。

npm i -S recompose Geocode react-google-maps

구성요소



Map.jsx
import React from 'react';
import PropTypes from 'prop-types';
import Geocode from 'react-geocode';
import {
  compose,
  lifecycle,
  withState,
} from 'recompose';
import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker,
} from 'react-google-maps';

const apiKey = "あなたのAPIKEY";

const MapWithAMakredInfoWindow = compose(
  withScriptjs,
  withGoogleMap,
)(({
  lat,
  lng,
}) => (
  <GoogleMap
    defaultZoom={15}
    defaultCenter={{ lat, lng }}
  >
    <Marker position={{ lat, lng }} />
  </GoogleMap>
));

const Map = compose(
  withState('geocode', 'setGeocode', { lat: 0, lng: 0 }),
  lifecycle({
    componentDidMount() {
      Geocode.setApiKey(apiKey);
      Geocode.fromAddress(this.props.location)
        .then((response) => {
          const { lat, lng } = response.results[0].geometry.location;
          this.setState({
            lat,
            lng,
          });
        })
        .catch(() => {
          this.setState({
            lat: undefined,
            lng: undefined,
          });
        });
    },
  }),
)(({
  lat,
  lng,
  location,
}) => {
  if (!lat || !lng) {
    return (
      <div>
        <p>住所が誤っています。</p>
      </div>
    );
  }
  return (
    <div className="access-map-wrapper">
      <MapWithAMakredInfoWindow
        googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${apiKey}&v=3.exp&libraries=geometry,drawing,places`}
        loadingElement={<div style={{ height: '100%' }} />}
        containerElement={<div style={{ height: '30vmax' }} />}
        mapElement={<div style={{ height: '100%' }} />}
        lat={lat}
        lng={lng}
        location={location}
      />
      <a href={`comgooglemaps://?daddr=${lat},${lng}`}>
        Googlemap アプリで開く
      </a>
    </div>
  );
});

Map.propTypes = {
  location: PropTypes.string.isRequired,
};

export default Map;


이제 호출자로부터 간단하게
<Map location="表示したい住所" />

그냥 부를 수 있으므로 편리하네요 ~

좋은 웹페이지 즐겨찾기