npm package: @fleetclear-connect/react-google-maps-native
Description: React components for Google Maps using native JS API with Marker, Path, and Cluster functionality
Author: Your Name
Latest version: 0.1.7

# Google Maps React Native

A lightweight React library for integrating Google Maps into your application using the native Google Maps JavaScript API. This package provides ready-to-use components for creating maps, adding markers, drawing paths, and clustering markers without any external map package dependencies.

## Installation

```bash
npm install react-google-maps-native
```

or

```bash
yarn add react-google-maps-native
```

## Usage

### Basic Map

```jsx
import { GoogleMap } from 'react-google-maps-native';

const MapComponent = () => {
  return (
    <GoogleMap 
      apiKey="YOUR_GOOGLE_MAPS_API_KEY"
      center={{ lat: 37.7749, lng: -122.4194 }}
      zoom={12}
    />
  );
};
```

### Map with Markers

```jsx
import { GoogleMap, Marker } from 'react-google-maps-native';

const MapWithMarkers = () => {
  return (
    <GoogleMap 
      apiKey="YOUR_GOOGLE_MAPS_API_KEY"
      center={{ lat: 37.7749, lng: -122.4194 }}
      zoom={12}
    >
      <Marker 
        position={{ lat: 37.7749, lng: -122.4194 }}
        title="San Francisco"
        infoWindowContent={<div>Welcome to San Francisco!</div>}
      />
      <Marker 
        position={{ lat: 37.7647, lng: -122.4321 }}
        title="Golden Gate Park"
      />
    </GoogleMap>
  );
};
```

### Map with Path

```jsx
import { GoogleMap, Path } from 'react-google-maps-native';

const MapWithPath = () => {
  const pathCoordinates = [
    { lat: 37.7749, lng: -122.4194 },
    { lat: 37.7647, lng: -122.4321 },
    { lat: 37.7837, lng: -122.4324 }
  ];

  return (
    <GoogleMap 
      apiKey="YOUR_GOOGLE_MAPS_API_KEY"
      center={{ lat: 37.7749, lng: -122.4194 }}
      zoom={12}
    >
      <Path 
        path={pathCoordinates}
        options={{
          strokeColor: '#0000FF',
          strokeOpacity: 0.8,
          strokeWeight: 3
        }}
      />
    </GoogleMap>
  );
};
```

### Map with Marker Clustering

```jsx
import { GoogleMap, Marker, Cluster } from 'react-google-maps-native';

const MapWithClusters = () => {
  const markers = [
    { id: 1, position: { lat: 37.7749, lng: -122.4194 }, title: "San Francisco" },
    { id: 2, position: { lat: 37.7647, lng: -122.4321 }, title: "Golden Gate Park" },
    { id: 3, position: { lat: 37.7837, lng: -122.4324 }, title: "Fisherman's Wharf" }
    // More markers...
  ];

  return (
    <GoogleMap 
      apiKey="YOUR_GOOGLE_MAPS_API_KEY"
      center={{ lat: 37.7749, lng: -122.4194 }}
      zoom={12}
    >
      <Cluster>
        {markers.map(marker => (
          <Marker 
            key={marker.id}
            position={marker.position}
            title={marker.title}
          />
        ))}
      </Cluster>
    </GoogleMap>
  );
};
```

## API Reference

### GoogleMap

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| apiKey | string | required | Your Google Maps API key |
| center | object | `{ lat: 0, lng: 0 }` | The initial center position of the map |
| zoom | number | 10 | The initial zoom level of the map |
| options | object | `{}` | Additional map options (see Google Maps API) |
| containerStyle | object | `{ width: '100%', height: '400px' }` | Style for the map container |
| onLoad | function | - | Callback when map is loaded |
| onClick | function | - | Callback when map is clicked |
| onDragEnd | function | - | Callback when map drag ends |

### Marker

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| position | object | required | The position of the marker (lat, lng) |
| icon | string/object | - | Custom icon URL or object |
| label | string | - | Marker label |
| title | string | - | Marker title (shown on hover) |
| draggable | boolean | false | Whether the marker can be dragged |
| onClick | function | - | Callback when marker is clicked |
| onDragEnd | function | - | Callback when marker drag ends |
| showInfoWindow | boolean | false | Whether to initially show the info window |
| infoWindowContent | node | - | Content for the info window |
| zIndex | number | - | The zIndex of the marker |

### Path

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| path | array | required | Array of positions (lat, lng) |
| options | object | `{ strokeColor: '#FF0000', strokeOpacity: 1.0, strokeWeight: 2 }` | Path style options |
| onClick | function | - | Callback when path is clicked |
| onMouseOver | function | - | Callback when mouse enters path |
| onMouseOut | function | - | Callback when mouse leaves path |
| editable | boolean | false | Whether the path is editable |
| draggable | boolean | false | Whether the path is draggable |

### Cluster

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| options | object | `{}` | Clustering options |
| onClusteringBegin | function | - | Callback when clustering begins |
| onClusteringEnd | function | - | Callback when clustering ends |
| onLoad | function | - | Callback when clusterer is loaded |

## License

MIT