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

React Google Maps

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

React Google Maps is a comprehensive React.js integration library for Google Maps that provides a rich set of React components wrapping the Google Maps JavaScript API. It offers higher-order components (HOCs), map overlays, layers, and advanced features like marker clustering, drawing tools, and places search functionality.

Package Information

Package Name: react-google-maps
Package Type: npm
Language: JavaScript/React
Installation: npm install react-google-maps

Core Imports

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

For CommonJS:

const { 
  GoogleMap, 
  Marker, 
  InfoWindow, 
  withGoogleMap, 
  withScriptjs 
} = require("react-google-maps");

Basic Usage

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

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

// Usage
<MapComponent
  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%` }} />}
/>

Architecture

React Google Maps is built around several core patterns:

Higher-Order Components (HOCs): withScriptjs and withGoogleMap provide script loading and map context
React Components: Direct wrappers for Google Maps API objects (GoogleMap, Marker, etc.)
Recompose Pattern: Uses recompose library for functional composition of HOCs
Event Handling: React-style props for Google Maps events (onClick, onDragEnd, etc.)
Addon System: Extensible architecture supporting InfoBox, MarkerClusterer, and other third-party enhancements

Capabilities

Higher-Order Components

Core HOCs for script loading and map context that wrap your components to provide Google Maps functionality.

function withScriptjs<P>(wrappedComponent: ComponentClass<P>): ComponentClass<P & WithScriptjsProps>;
function withGoogleMap<P>(wrappedComponent: ComponentClass<P>): ComponentClass<P & WithGoogleMapProps>;

interface WithScriptjsProps {
  googleMapURL: string;
  loadingElement: ReactElement<any>;
}

interface WithGoogleMapProps {
  containerElement: ReactElement<any>;
  mapElement: ReactElement<any>;
}

Higher-Order Components

Core Map Components

Essential components for rendering Google Maps, markers, and info windows in React applications.

class GoogleMap extends Component<GoogleMapProps> {
  fitBounds(bounds: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral): void;
  panBy(x: number, y: number): void;
  panTo(latLng: google.maps.LatLng | google.maps.LatLngLiteral): void;
  panToBounds(latLngBounds: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral): void;
  getBounds(): google.maps.LatLngBounds;
  getCenter(): google.maps.LatLng;
  getClickableIcons(): boolean;
  getDiv(): Element;
  getHeading(): number;
  getMapTypeId(): google.maps.MapTypeId | string;
  getProjection(): google.maps.Projection;
  getStreetView(): google.maps.StreetViewPanorama;
  getTilt(): number;
  getZoom(): number;
}

class Marker extends Component<MarkerProps> {
  getPosition(): google.maps.LatLng;
  getTitle(): string;
  getVisible(): boolean;
}

class InfoWindow extends Component<InfoWindowProps> {
  getPosition(): google.maps.LatLng;
  getZIndex(): number;
}

Core Map Components

Shape Overlays

Geometric shape components for drawing circles, polygons, polylines, and rectangles on maps.

class Circle extends Component<CircleProps> {
  getBounds(): google.maps.LatLngBounds;
  getCenter(): google.maps.LatLng;
  getRadius(): number;
}

class Polygon extends Component<PolygonProps> {
  getDraggable(): boolean;
  getPath(): google.maps.MVCArray<google.maps.LatLng>;
  getPaths(): google.maps.MVCArray<google.maps.MVCArray<google.maps.LatLng>>;
}

class Polyline extends Component<PolylineProps> {
  getPath(): google.maps.MVCArray<google.maps.LatLng>;
}

class Rectangle extends Component<RectangleProps> {
  getBounds(): google.maps.LatLngBounds;
}

Shape Overlays

Map Layers

Layer components for displaying traffic, bicycling routes, KML data, and other overlay information.

class TrafficLayer extends Component<TrafficLayerProps> {}
class BicyclingLayer extends Component<BicyclingLayerProps> {}
class KmlLayer extends Component<KmlLayerProps> {
  getDefaultViewport(): google.maps.LatLngBounds;
  getMetadata(): google.maps.KmlLayerMetadata;
  getStatus(): google.maps.KmlLayerStatus;
  getUrl(): string;
}
class FusionTablesLayer extends Component<FusionTablesLayerProps> {}
class GroundOverlay extends Component<GroundOverlayProps> {
  getBounds(): google.maps.LatLngBounds;
  getOpacity(): number;
  getUrl(): string;
}

Map Layers

Advanced Components

Specialized components for custom overlays, directions, Street View, and advanced Google Maps features.

class OverlayView extends Component<OverlayViewProps> {
  static FLOAT_PANE: string;
  static MAP_PANE: string;
  static MARKER_LAYER: string;
  static OVERLAY_LAYER: string;
  static OVERLAY_MOUSE_TARGET: string;
  
  getPanes(): google.maps.MapPanes;
  getProjection(): google.maps.MapCanvasProjection;
}

class DirectionsRenderer extends Component<DirectionsRendererProps> {
  getDirections(): google.maps.DirectionsResult;
  getPanel(): Node;
  getRouteIndex(): number;
}

class StreetViewPanorama extends Component<StreetViewPanoramaProps> {
  getLinks(): google.maps.StreetViewLink[];
  getLocation(): google.maps.StreetViewLocation;
  getPosition(): google.maps.LatLng;
  getPov(): google.maps.StreetViewPov;
}

Advanced Components

Addon Extensions

Third-party addon components for enhanced functionality like marker clustering, custom info boxes, and labeled markers.

class InfoBox extends Component<InfoBoxProps> {}
class MarkerClusterer extends Component<MarkerClustererProps> {}
class MarkerWithLabel extends Component<MarkerProps> {}

Addon Extensions

Places & Search

Google Places API integration for location search, autocomplete functionality, and place details.

class SearchBox extends Component<SearchBoxProps> {
  getBounds(): google.maps.LatLngBounds;
  getPlaces(): google.maps.places.PlaceResult[];
}

class StandaloneSearchBox extends Component<StandaloneSearchBoxProps> {
  getBounds(): google.maps.LatLngBounds;
  getPlaces(): google.maps.places.PlaceResult[];
}

Places & Search

Drawing Tools

Google Maps drawing tools for creating and editing geometric shapes interactively on the map.

class DrawingManager extends Component<DrawingManagerProps> {
  getDrawingMode(): google.maps.drawing.OverlayType;
}

Drawing Tools

Visualization

Data visualization components for displaying heatmaps and other visual representations of geographic data.

class HeatmapLayer extends Component<HeatmapLayerProps> {
  getData(): google.maps.MVCArray<google.maps.LatLng | google.maps.visualization.WeightedLocation>;
}

Visualization

Install with Tessl CLI