tessl/npm-react-google-maps

React.js Google Maps integration component library providing comprehensive Google Maps functionality through React components

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Higher-Order Components

Name: tessl/npm-react-google-maps
Author: tessl

React Google Maps provides two essential higher-order components (HOCs) that handle Google Maps JavaScript API script loading and provide map context to your components.

Capabilities

withScriptjs

HOC for loading the Google Maps JavaScript API script asynchronously and providing loading state management.

/**
 * Higher-order component for loading Google Maps JavaScript API script
 * @param wrappedComponent - Component to wrap with script loading functionality
 * @returns Enhanced component with script loading props
 */
function withScriptjs<P>(wrappedComponent: ComponentClass<P>): ComponentClass<P & WithScriptjsProps>;

interface WithScriptjsProps {
  /** Google Maps API URL with API key and libraries */
  googleMapURL: string;
  /** Element to show while script is loading */
  loadingElement: ReactElement<any>;
}

Usage Example:

import { withScriptjs, GoogleMap } from "react-google-maps";

const MapWithScript = withScriptjs((props) => (
  <div>
    {/* Your map component here */}
    <GoogleMap defaultZoom={8} defaultCenter={{ lat: 37.7749, lng: -122.4194 }} />
  </div>
));

// Usage
<MapWithScript
  googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${API_KEY}&libraries=geometry,drawing,places`}
  loadingElement={<div style={{ height: "400px" }}>Loading...</div>}
/>

withGoogleMap

HOC for providing Google Maps context and container management to wrapped components.

/**
 * Higher-order component for wrapping components with GoogleMap functionality
 * @param wrappedComponent - Component to wrap with Google Map context
 * @returns Enhanced component with Google Map props
 */
function withGoogleMap<P>(wrappedComponent: ComponentClass<P>): ComponentClass<P & WithGoogleMapProps>;

interface WithGoogleMapProps {
  /** Container element for the map component */
  containerElement: ReactElement<any>;
  /** Map element where Google Map will be rendered */
  mapElement: ReactElement<any>;
}

Usage Example:

import { withGoogleMap, GoogleMap, Marker } from "react-google-maps";

const MapComponent = withGoogleMap((props) => (
  <GoogleMap
    defaultZoom={props.zoom || 8}
    defaultCenter={props.center || { lat: 37.7749, lng: -122.4194 }}
  >
    {props.markers.map((marker, index) => (
      <Marker key={index} position={marker.position} title={marker.title} />
    ))}
  </GoogleMap>
));

// Usage
<MapComponent
  containerElement={<div style={{ height: "400px", width: "100%" }} />}
  mapElement={<div style={{ height: "100%" }} />}
  zoom={10}
  center={{ lat: 37.7749, lng: -122.4194 }}
  markers={[
    { position: { lat: 37.7749, lng: -122.4194 }, title: "San Francisco" }
  ]}
/>

Composing Both HOCs

The typical pattern is to compose both HOCs together for complete functionality:

import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps";

const MyMapComponent = withScriptjs(withGoogleMap((props) => (
  <GoogleMap
    defaultZoom={8}
    defaultCenter={{ lat: -34.397, lng: 150.644 }}
  >
    <Marker position={{ lat: -34.397, lng: 150.644 }} />
  </GoogleMap>
)));

// Usage with both HOCs
<MyMapComponent
  googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${API_KEY}&libraries=geometry,drawing,places`}
  loadingElement={<div style={{ height: "100%" }} />}
  containerElement={<div style={{ height: "400px" }} />}
  mapElement={<div style={{ height: "100%" }} />}
/>

Google Maps API URL Configuration

The googleMapURL prop should include:

Your Google Maps API key
Required libraries (geometry, drawing, places, visualization)
Optional parameters (language, region, etc.)

Example URLs:

// Basic configuration
const basicURL = `https://maps.googleapis.com/maps/api/js?key=${API_KEY}`;

// With libraries
const withLibraries = `https://maps.googleapis.com/maps/api/js?key=${API_KEY}&libraries=geometry,drawing,places,visualization`;

// With additional parameters
const fullURL = `https://maps.googleapis.com/maps/api/js?key=${API_KEY}&libraries=geometry,drawing,places&language=en&region=US`;

Install with Tessl CLI