CtrlK
BlogDocsLog inGet started
Tessl Logo

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

shapes.mddocs/

Shape Overlays

Geometric shape components for drawing circles, polygons, polylines, and rectangles on Google Maps. These components support interactive editing, styling, and event handling.

Capabilities

Circle

Component for rendering circular overlays on the map with support for editing and customization.

/**
 * Circular overlay component
 */
class Circle extends Component<CircleProps> {
  /** Returns the circle's bounds */
  getBounds(): google.maps.LatLngBounds;
  /** Returns the circle's center */
  getCenter(): google.maps.LatLng;
  /** Returns whether the circle is draggable */
  getDraggable(): boolean;
  /** Returns whether the circle is editable */
  getEditable(): boolean;
  /** Returns the circle's radius in meters */
  getRadius(): number;
  /** Returns whether the circle is visible */
  getVisible(): boolean;
}

interface CircleProps {
  // Default props
  defaultCenter?: google.maps.LatLng | google.maps.LatLngLiteral;
  defaultDraggable?: boolean;
  defaultEditable?: boolean;
  defaultOptions?: google.maps.CircleOptions;
  defaultRadius?: number;
  defaultVisible?: boolean;
  
  // Controlled props
  center?: google.maps.LatLng | google.maps.LatLngLiteral;
  draggable?: boolean;
  editable?: boolean;
  options?: google.maps.CircleOptions;
  radius?: number;
  visible?: boolean;
  
  // Event handlers
  onCenterChanged?(): void;
  onClick?(e: google.maps.MouseEvent): void;
  onDrag?(e: google.maps.MouseEvent): void;
  onDblClick?(e: google.maps.MouseEvent): void;
  onDragEnd?(e: google.maps.MouseEvent): void;
  onDragStart?(e: google.maps.MouseEvent): void;
  onMouseDown?(e: google.maps.MouseEvent): void;
  onMouseMove?(e: google.maps.MouseEvent): void;
  onMouseOut?(e: google.maps.MouseEvent): void;
  onMouseOver?(e: google.maps.MouseEvent): void;
  onMouseUp?(e: google.maps.MouseEvent): void;
  onRadiusChanged?(): void;
  onRightClick?(e: google.maps.MouseEvent): void;
}

Usage Example:

import { Circle } from "react-google-maps";

<GoogleMap defaultZoom={10} defaultCenter={{ lat: 37.7749, lng: -122.4194 }}>
  <Circle
    center={{ lat: 37.7749, lng: -122.4194 }}
    radius={5000} // 5km radius
    options={{
      fillColor: "#ff0000",
      fillOpacity: 0.35,
      strokeColor: "#ff0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
    }}
    editable={true}
    draggable={true}
    onCenterChanged={() => {
      console.log("Circle center changed");
    }}
    onRadiusChanged={() => {
      console.log("Circle radius changed");
    }}
  />
</GoogleMap>

Polygon

Component for rendering polygonal shapes with support for multiple paths and holes.

/**
 * Polygonal overlay component
 */
class Polygon extends Component<PolygonProps> {
  /** Returns whether the polygon is draggable */
  getDraggable(): boolean;
  /** Returns whether the polygon is editable */
  getEditable(): boolean;
  /** Returns the polygon's path (outer boundary) */
  getPath(): google.maps.MVCArray<google.maps.LatLng>;
  /** Returns all paths (including holes) */
  getPaths(): google.maps.MVCArray<google.maps.MVCArray<google.maps.LatLng>>;
  /** Returns whether the polygon is visible */
  getVisible(): boolean;
}

interface PolygonProps {
  // Default props
  defaultDraggable?: boolean;
  defaultEditable?: boolean;
  defaultOptions?: google.maps.PolygonOptions;
  defaultPath?: google.maps.MVCArray<google.maps.LatLng> | Array<google.maps.LatLng | google.maps.LatLngLiteral>;
  defaultPaths?: google.maps.MVCArray<google.maps.MVCArray<google.maps.LatLng>> | google.maps.MVCArray<google.maps.LatLng> | Array<Array<google.maps.LatLng | google.maps.LatLngLiteral>> | Array<google.maps.LatLng | google.maps.LatLngLiteral>;
  defaultVisible?: boolean;
  
  // Controlled props
  draggable?: boolean;
  editable?: boolean;
  options?: google.maps.PolygonOptions;
  path?: google.maps.MVCArray<google.maps.LatLng> | Array<google.maps.LatLng | google.maps.LatLngLiteral>;
  paths?: google.maps.MVCArray<google.maps.MVCArray<google.maps.LatLng>> | google.maps.MVCArray<google.maps.LatLng> | Array<Array<google.maps.LatLng | google.maps.LatLngLiteral>> | Array<google.maps.LatLng | google.maps.LatLngLiteral>;
  visible?: boolean;
  
  // Event handlers
  onClick?(e: google.maps.PolyMouseEvent): void;
  onDblClick?(e: google.maps.PolyMouseEvent): void;
  onDrag?(e: google.maps.MouseEvent): void;
  onDragEnd?(e: google.maps.MouseEvent): void;
  onDragStart?(e: google.maps.MouseEvent): void;
  onMouseDown?(e: google.maps.PolyMouseEvent): void;
  onMouseMove?(e: google.maps.PolyMouseEvent): void;
  onMouseOut?(e: google.maps.PolyMouseEvent): void;
  onMouseOver?(e: google.maps.PolyMouseEvent): void;
  onMouseUp?(e: google.maps.PolyMouseEvent): void;
  onRightClick?(e: google.maps.PolyMouseEvent): void;
}

Usage Example:

import { Polygon } from "react-google-maps";

const trianglePath = [
  { lat: 25.774, lng: -80.190 },
  { lat: 18.466, lng: -66.118 },
  { lat: 32.321, lng: -64.757 },
  { lat: 25.774, lng: -80.190 }
];

<GoogleMap defaultZoom={5} defaultCenter={{ lat: 24.886, lng: -70.268 }}>
  <Polygon
    path={trianglePath}
    options={{
      fillColor: "#ff0000",
      fillOpacity: 0.35,
      strokeColor: "#ff0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
    }}
    editable={true}
    draggable={true}
    onClick={(event) => {
      console.log("Polygon clicked at vertex:", event.vertex);
    }}
  />
</GoogleMap>

Polyline

Component for rendering line paths on the map, commonly used for routes and boundaries.

/**
 * Polyline overlay component for drawing paths
 */
class Polyline extends Component<PolylineProps> {
  /** Returns whether the polyline is draggable */
  getDraggable(): boolean;
  /** Returns whether the polyline is editable */
  getEditable(): boolean;
  /** Returns the polyline's path */
  getPath(): google.maps.MVCArray<google.maps.LatLng>;
  /** Returns whether the polyline is visible */
  getVisible(): boolean;
}

interface PolylineProps {
  // Default props
  defaultDraggable?: boolean;
  defaultEditable?: boolean;
  defaultOptions?: google.maps.PolylineOptions;
  defaultPath?: google.maps.MVCArray<google.maps.LatLng> | Array<google.maps.LatLng | google.maps.LatLngLiteral>;
  defaultVisible?: boolean;
  
  // Controlled props
  draggable?: boolean;
  editable?: boolean;
  options?: google.maps.PolylineOptions;
  path?: google.maps.MVCArray<google.maps.LatLng> | Array<google.maps.LatLng | google.maps.LatLngLiteral>;
  visible?: boolean;
  
  // Event handlers
  onClick?(e: google.maps.PolyMouseEvent): void;
  onDblClick?(e: google.maps.PolyMouseEvent): void;
  onDrag?(e: google.maps.MouseEvent): void;
  onDragEnd?(e: google.maps.MouseEvent): void;
  onDragStart?(e: google.maps.MouseEvent): void;
  onMouseDown?(e: google.maps.PolyMouseEvent): void;
  onMouseMove?(e: google.maps.PolyMouseEvent): void;
  onMouseOut?(e: google.maps.PolyMouseEvent): void;
  onMouseOver?(e: google.maps.PolyMouseEvent): void;
  onMouseUp?(e: google.maps.PolyMouseEvent): void;
  onRightClick?(e: google.maps.PolyMouseEvent): void;
}

Usage Example:

import { Polyline } from "react-google-maps";

const flightPath = [
  { lat: 37.772, lng: -122.214 },
  { lat: 21.291, lng: -157.821 },
  { lat: -18.142, lng: 178.431 },
  { lat: -27.467, lng: 153.027 }
];

<GoogleMap defaultZoom={3} defaultCenter={{ lat: 0, lng: -180 }}>
  <Polyline
    path={flightPath}
    options={{
      strokeColor: "#ff2527",
      strokeOpacity: 0.75,
      strokeWeight: 4,
    }}
    editable={true}
    onClick={(event) => {
      console.log("Polyline clicked at vertex:", event.vertex);
    }}
  />
</GoogleMap>

Rectangle

Component for rendering rectangular overlays on the map.

/**
 * Rectangular overlay component
 */
class Rectangle extends Component<RectangleProps> {
  /** Returns the rectangle's bounds */
  getBounds(): google.maps.LatLngBounds;
  /** Returns whether the rectangle is draggable */
  getDraggable(): boolean;
  /** Returns whether the rectangle is editable */
  getEditable(): boolean;
  /** Returns whether the rectangle is visible */
  getVisible(): boolean;
}

interface RectangleProps {
  // Default props
  defaultBounds?: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral;
  defaultDraggable?: boolean;
  defaultEditable?: boolean;
  defaultOptions?: google.maps.RectangleOptions;
  defaultVisible?: boolean;
  
  // Controlled props
  bounds?: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral;
  draggable?: boolean;
  editable?: boolean;
  options?: google.maps.RectangleOptions;
  visible?: boolean;
  
  // Event handlers
  onBoundsChanged?(): void;
  onClick?(e: google.maps.MouseEvent): void;
  onDblClick?(e: google.maps.MouseEvent): void;
  onDrag?(e: google.maps.MouseEvent): void;
  onDragEnd?(e: google.maps.MouseEvent): void;
  onDragStart?(e: google.maps.MouseEvent): void;
  onMouseDown?(e: google.maps.MouseEvent): void;
  onMouseMove?(e: google.maps.MouseEvent): void;
  onMouseOut?(e: google.maps.MouseEvent): void;
  onMouseOver?(e: google.maps.MouseEvent): void;
  onMouseUp?(e: google.maps.MouseEvent): void;
  onRightClick?(e: google.maps.MouseEvent): void;
}

Usage Example:

import { Rectangle } from "react-google-maps";

const rectangleBounds = {
  north: 33.685,
  south: 33.671,
  east: -116.234,
  west: -116.251,
};

<GoogleMap defaultZoom={13} defaultCenter={{ lat: 33.678, lng: -116.243 }}>
  <Rectangle
    bounds={rectangleBounds}
    options={{
      fillColor: "#ff0000",
      fillOpacity: 0.35,
      strokeColor: "#ff0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
    }}
    editable={true}
    draggable={true}
    onBoundsChanged={() => {
      console.log("Rectangle bounds changed");
    }}
  />
</GoogleMap>

Common Shape Styling Options

All shape components support common styling through the options prop:

const shapeOptions = {
  fillColor: "#ff0000",        // Fill color
  fillOpacity: 0.35,           // Fill opacity (0-1)
  strokeColor: "#ff0000",      // Border color
  strokeOpacity: 0.8,          // Border opacity (0-1)
  strokeWeight: 2,             // Border width in pixels
  clickable: true,             // Whether shape responds to mouse events
  editable: false,             // Whether shape can be edited
  draggable: false,            // Whether shape can be dragged
  visible: true,               // Whether shape is visible
  zIndex: 1                    // Stacking order
};

Interactive Editing

Enable interactive editing by setting editable={true}:

<Polygon
  path={polygonPath}
  editable={true}
  onMouseUp={() => {
    // Handle edit completion
    const updatedPath = polygon.getPath().getArray();
    savePolygonPath(updatedPath);
  }}
/>

Install with Tessl CLI

npx tessl i tessl/npm-react-google-maps

docs

addons.md

advanced.md

core-components.md

drawing.md

hocs.md

index.md

layers.md

places.md

shapes.md

visualization.md

tile.json