@fleetclear-connect/react-google-maps-native

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

npm install react-google-maps-native

or

yarn add react-google-maps-native

Usage

Basic Map

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

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

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

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