google-map-field

google-map-field

import React from 'react'
import PropTypes from 'prop-types'
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from 'react-google-maps'
import Field from 'redux-form/es/Field'

const _Maps = ( withScriptjs(withGoogleMap((props) =>
  <GoogleMap
    defaultZoom={ 8 }
    defaultCenter={ { lat: -34.397, lng: 150.644 } }
    loadingElement={ <div style={ { height: `100%` } }/> }
  >
  </GoogleMap>
)))

export function Maps({ ...props }){
  //TODO: Streetview
  const key = 'AIzaSyA7JfEizwtBAEM_QAiANL_lb5bNFgWq_Ek'
  console.log(arguments)
  return (
    <Field
      component={ _Maps }
      googleMapURL={ `https://maps.googleapis.com/maps/api/js?key=${key}&v=3.exp&libraries=geometry,drawing,places` }
      loadingElement={ <div style={ { height: `100%` } }/> }
      containerElement={ <div style={ { height: `400px` } }/> }
      mapElement={ <div style={ { height: `100%` } }/> }
      { ...props }
    />
  )
}