import React from 'react'

import { withGoogleMap, GoogleMap, Marker } from "react-google-maps"
import MarkerClusterer from "react-google-maps/lib/addons/MarkerClusterer";
import MyLocation from './MyLocation'
import eatIcon from './eat.png'

const WarungMarker = ({ position }) => {
  return (
    <Marker icon={eatIcon} position={position} />
  )
}

const Map = withGoogleMap(props => {
  const { myLocation, center, markers, onMapLoad, onMapClick } = props
  const defaultOptions = {
    disableDefaultUI: true,
    disableDoubleClickZoom: true,
    zoomControl: true,
    minZoom: 13,
    maxZoom: 20,
    styles: [
      {
        featureType: 'transit',
        stylers: [{ visibility: 'off' }]
      },
      {
        featureType: 'poi',
        stylers: [{ visibility: 'off' }]
      },
    ]
  }
  return (
    <GoogleMap
      ref={onMapLoad}
      center={center}
      onClick={onMapClick}
      defaultZoom={15}
      defaultCenter={{ lat: -7.801394959643029, lng: 110.36470413208008 }}
      defaultOptions={defaultOptions}
    >
      {myLocation && <MyLocation position={myLocation} />}
      <MarkerClusterer>
        {markers.map((m, i) => (
          <WarungMarker key={i} {...m} />
        ))}
      </MarkerClusterer>
    </GoogleMap>
  )
})

export default Map

@@ -579,17 +579,17 @@
 nZoom: 1
-3
+2
 ,%0A    ma
@@ -799,16 +799,93 @@
   %5D%0A  %7D%0A
+  const defaultCenter = %7B lat: -7.801394959643029, lng: 110.36470413208008 %7D%0A
   return
@@ -944,16 +944,33 @@
 =%7Bcenter
+ %7C%7C defaultCenter
 %7D%0A      
@@ -1038,60 +1038,21 @@
 er=%7B
-%7B lat: -7.801394959643029, lng: 110.36470413208008 %7D
+defaultCenter
 %7D%0A  

add default center