{"size": 1177, "ext": "js", "max_stars_repo_path": "src/components/MapComponent.js", "max_stars_repo_name": "dreyacosta/scooters-web", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/MapComponent.js", "max_issues_repo_name": "dreyacosta/scooters-web", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/MapComponent.js", "max_forks_repo_name": "dreyacosta/scooters-web", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 28.7073170732, "max_line_length": 91, "alphanum_fraction": 0.6304163127}
import React from 'react';
import { compose, withProps } from 'recompose';
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from 'react-google-maps';
import scooter from '../app/assets/scooter.svg'

const GOOGLE_MAPS_API_PARAMS = [
  `key=${process.env.REACT_APP_GOOGLE_MAPS_API_KEY}`,
  `v=3.exp`,
  `libraries=geometry,drawing,places`
].join('&');

export default compose(
  withProps({
    googleMapURL: `${process.env.REACT_APP_GOOGLE_MAPS_API_URI}?${GOOGLE_MAPS_API_PARAMS}`,
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `600px` }} />,
    mapElement: <div style={{ height: `100%` }} />
  }),
  withScriptjs,
  withGoogleMap
)(({ defaultCenter, markers }) => {
  return (
  <GoogleMap
    defaultZoom={14}
    center={{ lat: defaultCenter.latitude, lng: defaultCenter.longitude }}
  >
    <Marker
      key="my-location"
      position={{ lat: defaultCenter.latitude, lng: defaultCenter.longitude }}
    />
    { markers.map(({ id, coordinates }) => {
      return (
        <Marker
          key={id}
          icon={scooter}
          position={coordinates}
        />
      )
     })}
  </GoogleMap>);
});