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

core-components.mddocs/

Core Map Components

Essential React components for rendering Google Maps, markers, and info windows. These components form the foundation of most Google Maps React applications.

Capabilities

GoogleMap

The main map component that renders a Google Map instance with full React integration.

/**
 * Main Google Map component
 */
class GoogleMap extends Component<GoogleMapProps> {
  /** Adjusts the map bounds to fit the specified bounds */
  fitBounds(bounds: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral): void;
  /** Pans the map by the given distance in pixels */
  panBy(x: number, y: number): void;
  /** Pans the map to the specified coordinates */
  panTo(latLng: google.maps.LatLng | google.maps.LatLngLiteral): void;
  /** Pans the map to fit the specified bounds */
  panToBounds(latLngBounds: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral): void;
  /** Returns the current map bounds */
  getBounds(): google.maps.LatLngBounds;
  /** Returns the current map center */
  getCenter(): google.maps.LatLng;
  /** Returns whether icons are clickable */
  getClickableIcons(): boolean;
  /** Returns the map's DOM element */
  getDiv(): Element;
  /** Returns the current heading */
  getHeading(): number;
  /** Returns the current map type ID */
  getMapTypeId(): google.maps.MapTypeId | string;
  /** Returns the current projection */
  getProjection(): google.maps.Projection;
  /** Returns the Street View panorama */
  getStreetView(): google.maps.StreetViewPanorama;
  /** Returns the current tilt */
  getTilt(): number;
  /** Returns the current zoom level */
  getZoom(): number;
}

interface GoogleMapProps {
  // Default props (initial values)
  defaultCenter?: google.maps.LatLng | google.maps.LatLngLiteral;
  defaultClickableIcons?: boolean;
  defaultHeading?: number;
  defaultMapTypeId?: google.maps.MapTypeId | string;
  defaultOptions?: google.maps.MapOptions;
  defaultStreetView?: google.maps.StreetViewPanorama;
  defaultTilt?: number;
  defaultZoom?: number;
  
  // Controlled props (for controlled components)
  center?: google.maps.LatLng | google.maps.LatLngLiteral;
  clickableIcons?: boolean;
  heading?: number;
  mapTypeId?: google.maps.MapTypeId | string;
  options?: google.maps.MapOptions;
  streetView?: google.maps.StreetViewPanorama;
  tilt?: number;
  zoom?: number;
  
  // Event handlers
  onBoundsChanged?(): void;
  onCenterChanged?(): void;
  onClick?(e: google.maps.MouseEvent | google.maps.IconMouseEvent): void;
  onDblClick?(e: google.maps.MouseEvent): void;
  onDrag?(): void;
  onDragEnd?(): void;
  onDragStart?(): void;
  onHeadingChanged?(): void;
  onIdle?(): void;
  onMapTypeIdChanged?(): void;
  onMouseMove?(e: google.maps.MouseEvent): void;
  onMouseOut?(e: google.maps.MouseEvent): void;
  onMouseOver?(e: google.maps.MouseEvent): void;
  onProjectionChanged?(): void;
  onResize?(): void;
  onRightClick?(e: google.maps.MouseEvent): void;
  onTilesLoaded?(): void;
  onTiltChanged?(): void;
  onZoomChanged?(): void;
}

Usage Example:

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

const Map = withScriptjs(withGoogleMap(() => (
  <GoogleMap
    defaultZoom={10}
    defaultCenter={{ lat: 37.7749, lng: -122.4194 }}
    defaultOptions={{
      streetViewControl: false,
      scaleControl: true,
      mapTypeControl: true,
      panControl: false,
      zoomControl: true,
      rotateControl: false,
      fullscreenControl: true
    }}
    onClick={(event) => {
      console.log("Map clicked at:", event.latLng.lat(), event.latLng.lng());
    }}
    onZoomChanged={() => {
      console.log("Map zoom changed");
    }}
  >
    {/* Child components like Marker, InfoWindow, etc. */}
  </GoogleMap>
)));

Marker

Component for displaying markers on the map with support for animations, custom icons, and interactivity.

/**
 * Map marker component
 */
class Marker extends Component<MarkerProps> {
  /** Returns the marker's animation */
  getAnimation(): google.maps.Animation;
  /** Returns whether the marker is clickable */
  getClickable(): boolean;
  /** Returns the marker's cursor */
  getCursor(): string;
  /** Returns whether the marker is draggable */
  getDraggable(): boolean;
  /** Returns the marker's icon */
  getIcon(): string | google.maps.Icon | google.maps.Symbol;
  /** Returns the marker's label */
  getLabel(): google.maps.MarkerLabel;
  /** Returns the marker's opacity */
  getOpacity(): number;
  /** Returns the marker's place */
  getPlace(): google.maps.Place;
  /** Returns the marker's position */
  getPosition(): google.maps.LatLng;
  /** Returns the marker's shape */
  getShape(): google.maps.MarkerShape;
  /** Returns the marker's title */
  getTitle(): string;
  /** Returns whether the marker is visible */
  getVisible(): boolean;
  /** Returns the marker's z-index */
  getZIndex(): number;
}

interface MarkerProps {
  // Default props
  defaultAnimation?: google.maps.Animation;
  defaultClickable?: boolean;
  defaultCursor?: string;
  defaultDraggable?: boolean;
  defaultIcon?: string | google.maps.Icon | google.maps.Symbol;
  defaultLabel?: google.maps.MarkerLabel;
  defaultOpacity?: number;
  defaultOptions?: google.maps.MarkerOptions;
  defaultPlace?: google.maps.Place;
  defaultPosition?: google.maps.LatLng | google.maps.LatLngLiteral;
  defaultShape?: google.maps.MarkerShape;
  defaultTitle?: string;
  defaultVisible?: boolean;
  defaultZIndex?: number;
  
  // Controlled props
  animation?: google.maps.Animation;
  attribution?: google.maps.Attribution;
  clickable?: boolean;
  cursor?: string;
  draggable?: boolean;
  icon?: string | google.maps.Icon | google.maps.Symbol;
  label?: google.maps.MarkerLabel;
  opacity?: number;
  options?: google.maps.MarkerOptions;
  place?: google.maps.Place;
  position?: google.maps.LatLng | google.maps.LatLngLiteral;
  shape?: google.maps.MarkerShape;
  title?: string;
  visible?: boolean;
  zIndex?: number;
  
  // Event handlers
  onAnimationChanged?(): void;
  onClick?(e: google.maps.MouseEvent): void;
  onClickableChanged?(): void;
  onCursorChanged?(): void;
  onDblClick?(e: google.maps.MouseEvent): void;
  onDrag?(e: google.maps.MouseEvent): void;
  onDraggableChanged?(): void;
  onDragEnd?(e: google.maps.MouseEvent): void;
  onDragStart?(e: google.maps.MouseEvent): void;
  onFlatChanged?(): void;
  onIconChanged?(): void;
  onMouseDown?(e: google.maps.MouseEvent): void;
  onMouseOut?(e: google.maps.MouseEvent): void;
  onMouseOver?(e: google.maps.MouseEvent): void;
  onMouseUp?(e: google.maps.MouseEvent): void;
  onPositionChanged?(): void;
  onRightClick?(e: google.maps.MouseEvent): void;
  onShapeChanged?(): void;
  onTitleChanged?(): void;
  onVisibleChanged?(): void;
  onZindexChanged?(): void;
}

Usage Example:

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

<GoogleMap defaultZoom={10} defaultCenter={{ lat: 37.7749, lng: -122.4194 }}>
  <Marker
    position={{ lat: 37.7749, lng: -122.4194 }}
    title="San Francisco"
    icon={{
      url: "https://maps.google.com/mapfiles/ms/icons/red-dot.png",
      scaledSize: { width: 32, height: 32 }
    }}
    animation={google.maps.Animation.DROP}
    draggable={true}
    onClick={() => {
      console.log("Marker clicked!");
    }}
    onDragEnd={(event) => {
      console.log("Marker moved to:", event.latLng.lat(), event.latLng.lng());
    }}
  />
</GoogleMap>

InfoWindow

Component for displaying information windows on the map, typically shown when markers are clicked.

/**
 * Info window component for displaying content in a popup
 */
class InfoWindow extends Component<InfoWindowProps> {
  /** Returns the info window's position */
  getPosition(): google.maps.LatLng;
  /** Returns the info window's z-index */
  getZIndex(): number;
}

interface InfoWindowProps {
  // Default props
  defaultOptions?: google.maps.InfoWindowOptions;
  defaultPosition?: google.maps.LatLng | google.maps.LatLngLiteral;
  defaultZIndex?: number;
  
  // Controlled props
  options?: google.maps.InfoWindowOptions;
  position?: google.maps.LatLng | google.maps.LatLngLiteral;
  zIndex?: number;
  
  // Event handlers
  onCloseClick?(): void;
  onDomReady?(): void;
  onContentChanged?(): void;
  onPositionChanged?(): void;
  onZindexChanged?(): void;
}

Usage Example:

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

const [showInfoWindow, setShowInfoWindow] = useState(false);

<GoogleMap defaultZoom={10} defaultCenter={{ lat: 37.7749, lng: -122.4194 }}>
  <Marker
    position={{ lat: 37.7749, lng: -122.4194 }}
    onClick={() => setShowInfoWindow(true)}
  />
  
  {showInfoWindow && (
    <InfoWindow
      position={{ lat: 37.7749, lng: -122.4194 }}
      onCloseClick={() => setShowInfoWindow(false)}
    >
      <div>
        <h3>San Francisco</h3>
        <p>The City by the Bay</p>
        <img src="/sf-image.jpg" alt="San Francisco" style={{ width: "200px" }} />
      </div>
    </InfoWindow>
  )}
</GoogleMap>

Common Patterns

Controlled vs Uncontrolled Components

Most components support both controlled and uncontrolled patterns:

// Uncontrolled (using default props)
<GoogleMap 
  defaultZoom={10} 
  defaultCenter={{ lat: 37.7749, lng: -122.4194 }} 
/>

// Controlled (using state)
const [zoom, setZoom] = useState(10);
const [center, setCenter] = useState({ lat: 37.7749, lng: -122.4194 });

<GoogleMap 
  zoom={zoom} 
  center={center}
  onZoomChanged={() => setZoom(map.getZoom())}
  onCenterChanged={() => setCenter(map.getCenter().toJSON())}
/>

Event Handling

All components follow React conventions for event handling:

<Marker
  position={{ lat: 37.7749, lng: -122.4194 }}
  onClick={(event) => {
    // event is a google.maps.MouseEvent
    console.log("Clicked at:", event.latLng.lat(), event.latLng.lng());
  }}
  onDragEnd={(event) => {
    // Handle marker drag
    updateMarkerPosition(event.latLng.toJSON());
  }}
/>

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