@vis.gl/react-google-maps/dist/server/index.d.ts

React components and hooks for the Google Maps JavaScript API

import React from 'react';

type StaticMapsLocation = google.maps.LatLngLiteral | string;
type StaticMapsMarker = {
    location: StaticMapsLocation;
    color?: string;
    size?: 'tiny' | 'mid' | 'small';
    label?: string;
    icon?: string;
    anchor?: string;
    scale?: 1 | 2 | 4;
};
type StaticMapsPath = {
    coordinates: Array<StaticMapsLocation> | string;
    weight?: number;
    color?: string;
    fillcolor?: string;
    geodesic?: boolean;
};
type StaticMapsApiOptions = {
    apiKey: string;
    width: number;
    height: number;
    center?: StaticMapsLocation;
    zoom?: number;
    scale?: number;
    format?: 'png' | 'png8' | 'png32' | 'gif' | 'jpg' | 'jpg-baseline';
    mapType?: google.maps.MapTypeId;
    language?: string;
    region?: string;
    mapId?: string;
    markers?: Array<StaticMapsMarker>;
    paths?: Array<StaticMapsPath>;
    visible?: Array<StaticMapsLocation>;
    style?: google.maps.MapTypeStyle[];
};

/**
 * Creates a URL for the Google Static Maps API with the specified parameters.
 *
 * @param {Object} options - The configuration options for the static map
 * @param {string} options.apiKey - Your Google Maps API key (required)
 * @param {number} options.width - The width of the map image in pixels (required)
 * @param {number} options.height - The height of the map image in pixels (required)
 * @param {StaticMapsLocation} [options.center] - The center point of the map (lat/lng or address).
 *  Required if no markers or paths or "visible locations" are provided.
 * @param {number} [options.zoom] - The zoom level of the map. Required if no markers or paths or "visible locations" are provided.
 * @param {1|2|4} [options.scale] - The resolution of the map (1, 2, or 4)
 * @param {string} [options.format] - The image format (png, png8, png32, gif, jpg, jpg-baseline)
 * @param {string} [options.mapType] - The type of map (roadmap, satellite, terrain, hybrid)
 * @param {string} [options.language] - The language of the map labels
 * @param {string} [options.region] - The region code for the map
 * @param {string} [options.map_id] - The Cloud-based map style ID
 * @param {StaticMapsMarker[]} [options.markers=[]] - Array of markers to display on the map
 * @param {StaticMapsPath[]} [options.paths=[]] - Array of paths to display on the map
 * @param {StaticMapsLocation[]} [options.visible=[]] - Array of locations that should be visible on the map
 * @param {MapTypeStyle[]} [options.style=[]] - Array of style objects to customize the map appearance
 *
 * @returns {string} The complete Google Static Maps API URL
 *
 * @throws {Error} If API key is not provided
 * @throws {Error} If width or height is not provided
 *
 * @example
 * const url = createStaticMapsUrl({
 *   apiKey: 'YOUR_API_KEY',
 *   width: 600,
 *   height: 400,
 *   center: { lat: 40.714728, lng: -73.998672 },
 *   zoom: 12,
 *   markers: [
 *     {
 *       location: { lat: 40.714728, lng: -73.998672 },
 *       color: 'red',
 *       label: 'A'
 *     }
 *   ],
 *   paths: [
 *     {
 *       coordinates: [
 *         { lat: 40.714728, lng: -73.998672 },
 *         { lat: 40.719728, lng: -73.991672 }
 *       ],
 *       color: '0x0000ff',
 *       weight: 5
 *     }
 *   ],
 *   style: [
 *     {
 *       featureType: 'road',
 *       elementType: 'geometry',
 *       stylers: [{color: '#00ff00'}]
 *     }
 *   ]
 * });
 *
 * // Results in URL similar to:
 * // https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY
 * // &size=600x400
 * // &center=40.714728,-73.998672&zoom=12
 * // &markers=color:red|label:A|40.714728,-73.998672
 * // &path=color:0x0000ff|weight:5|40.714728,-73.998672|40.719728,-73.991672
 * // &style=feature:road|element:geometry|color:0x00ff00
 */
declare function createStaticMapsUrl({ apiKey, width, height, center, zoom, scale, format, mapType, language, region, mapId, markers, paths, visible, style }: StaticMapsApiOptions): string;

/**
 * Props for the StaticMap component
 */
type StaticMapProps = {
    url: string;
    className?: string;
};
declare const StaticMap: (props: StaticMapProps) => React.JSX.Element;

export { StaticMap, createStaticMapsUrl };
export type { StaticMapProps, StaticMapsApiOptions, StaticMapsLocation, StaticMapsMarker, StaticMapsPath };