import React, { useState } from 'react';
import { GoogleMap, LoadScript } from '@react-google-maps/api';

function MapComponent() {
  const [zoom, setZoom] = useState(8); // Initial zoom level

  const handleZoomChanged = (map) => {
    setZoom(map.getZoom());
  }

  return (
    <LoadScript googleMapsApiKey="YOUR_GOOGLE_MAPS_API_KEY">
      <GoogleMap
        id="example-map"
        mapContainerStyle={{ width: '400px', height: '400px' }}
        center={{ lat: -34.397, lng: 150.644 }}
        zoom={zoom}
        onZoomChanged={(map) => handleZoomChanged(map)}
      />
    </LoadScript>
  );
}

export default MapComponent;