google-maps-api-react-map package

Library google-maps-api-react-map allows you to render a Google Map in your application.

google-maps-api-react-map provides very simple bindings to the google maps api and lets you use it in your app as React components.

[!IMPORTANT] This library requires React v16.8 or later.

Installation

npm install --save google-maps-api-react-map 

or

yarn add google-maps-api-react-map

General Usage

importing the MapsApiProvider component from the library

import { MapsApiProvider } from "google-maps-api-react-map";

and now we can wrap our components from the ecosystem google-maps-api-react

 return (
    <div className="App">
      <MapsApiProvider apiKey="your google maps api key">
        <MapComponent center={center} />
      </MapsApiProvider>
    </div>
  );

MapComponent might look something like this

const MapComponent = (props: MapComponentProps) => {
  const { center } = props;
  return (
    <div className="map-container">
      <Map center={center}></Map>
    </div>
  );
};

prop center mandatory and must look like this

const center = { lat: 39.705958, lng: -75.538 };

minimal styles map.css

.map-container {
  width: 600px;
  height: 600px;
}

The Map component will occupy the entire container area.

Props

Prop | Type | Required | Description
| ------------------------ | :-------: | :------: | ------------------------------------------------------ | | backgroundColor | string | optional | Color used for the background of the Map div. This color will be visible when tiles have not yet loaded as the user pans. This option can only be set when the map is initialized. | | center | LatLng | LatLngLiteral | ✅required | The initial Map center. | | | children | React.ReactElement | React.ReactNode | React.JSX.Element | optional | The markup element to be rendered on the map. | | className | string | optional | Specifies the element’s CSS class name | | | clickableIcons | boolean | optional | When false, map icons are not clickable. A map icon represents a point of interest, also known as a POI. | | | controlSize | number | optional | Size in pixels of the controls appearing on the map. This value must be supplied directly when creating the Map, updating this value later may bring the controls into an undefined state. Only governs the controls made by the Maps API itself. Does not scale developer created custom controls. | | | disableDefaultUI | boolean | optional | Enables/disables all default UI buttons. May be overridden individually. Does not disable the keyboard controls, which are separately controlled by the MapOptions.keyboardShortcuts option. Does not disable gesture controls, which are separately controlled by the MapOptions.gestureHandling option. | | | disableDoubleClickZoom | boolean | optional | Enables/disables zoom and center on double click. Enabled by default. | | | draggableCursor | string | optional | Note: This property is not recommended. To disable zooming on double click, you can use the gestureHandling property, and set it to "none". | | | draggingCursor | string | optional | The name or url of the cursor to display when mousing over a draggable map. This property uses the css cursor attribute to change the icon. As with the css property, you must specify at least one fallback cursor that is not a URL. For example: draggableCursor: 'url(http://www.example.com/icon.png), auto;'. | | | fullscreenControl | boolean | optional | The enabled/disabled state of the Fullscreen control | | | fullscreenControlOptions | FullscreenControlOptions | optional | The display options for the Fullscreen control. | | | gestureHandling | string | optional | This setting controls how the API handles gestures on the map. Allowed values: "cooperative": Scroll events and one-finger touch gestures scroll the page, and do not zoom or pan the map. Two-finger touch gestures pan and zoom the map. Scroll events with a ctrl key or ⌘ key pressed zoom the map.In this mode the map cooperates with the page."greedy": All touch gestures and scroll events pan or zoom the map."none": The map cannot be panned or zoomed by user gestures."auto": (default) Gesture handling is either cooperative or greedy, depending on whether the page is scrollable or in an iframe. | | | heading | number | optional | The heading for aerial imagery in degrees measured clockwise from cardinal direction North. Headings are snapped to the nearest available angle for which imagery is available. | | | isFractionalZoomEnabled | boolean | optional | Default: true for vector maps and false for raster maps Whether the map should allow fractional zoom levels. Listen to isfractionalzoomenabled_changed to know when the default has been set. | | | keyboardShortcuts | boolean | optional | f false, prevents the map from being controlled by the keyboard. Keyboard shortcuts are enabled by default. | | | mapId | string | optional | The Map ID of the map. This parameter cannot be set or changed after a map is instantiated. | | | mapTypeControl | boolean | optional | The initial enabled/disabled state of the Map type control. | | | mapTypeControlOptions | MapTypeControlOptions | optional | The initial display options for the Map type control. | | | mapTypeId | MapTypeId | string | optional | The initial Map mapTypeId. Defaults to ROADMAP. | | | maxZoom | number | optional | The maximum zoom level which will be displayed on the map. If omitted, or set to null, the maximum zoom from the current map type is used instead. Valid zoom values are numbers from zero up to the supported maximum zoom level. | | | minZoom | number | optional | The minimum zoom level which will be displayed on the map. If omitted, or set to null, the minimum zoom from the current map type is used instead. Valid zoom values are numbers from zero up to the supported maximum zoom level. | | | noClear | boolean | optional | If true, do not clear the contents of the Map div. restriction | MapRestriction | optional | Defines a boundary that restricts the area of the map accessible to users. When set, a user can only pan and zoom while the camera view stays inside the limits of the boundary. | | | rotateControl | boolean | optional | The enabled/disabled state of the Rotate control. | | | rotateControlOptions | RotateControlOptions | optional | The display options for the Rotate control. | | | scaleControl | boolean | optional | The initial enabled/disabled state of the Scale control. | | | scaleControlOptions | ScaleControlOptions | optional | The initial display options for the Scale control. | | | scrollwheel | boolean | optional | If false, disables zooming on the map using a mouse scroll wheel. The scrollwheel is enabled by default. | | | streetView | StreetViewPanorama | optional | A StreetViewPanorama to display when the Street View pegman is dropped on the map. If no panorama is specified, a default StreetViewPanorama will be displayed in the map's div when the pegman is dropped. | | | streetViewControl | boolean | optional | The initial enabled/disabled state of the Street View Pegman control. This control is part of the default UI, and should be set to false when displaying a map type on which the Street View road overlay should not appear (e.g. a non-Earth map type). | | | streetViewControlOptions | StreetViewControlOptions | optional | The initial display options for the Street View Pegman control. | | | styles | Array < MapTypeStyle > | optional | Styles to apply to each of the default map types. Note that for satellite/hybrid and terrain modes, these styles will only apply to labels and geometry. | | | tilt | number | optional | For vector maps, sets the angle of incidence of the map. The allowed values are restricted depending on the zoom level of the map. For raster maps, controls the automatic switching behavior for the angle of incidence of the map. The only allowed values are 0 and 45. The value 0 causes the map to always use a 0° overhead view regardless of the zoom level and viewport. The value 45 causes the tilt angle to automatically switch to 45 whenever 45° imagery is available for the current zoom level and viewport, and switch back to 0 whenever 45° imagery is not available (this is the default behavior). 45° imagery is only available for satellite and hybrid map types, within some locations, and at some zoom levels. Note: getTilt returns the current tilt angle, not the value specified by this option. Because getTilt and this option refer to different things, do not bind() the tilt property; doing so may yield unpredictable effects. | | | zoom | number | optional | The initial Map zoom level. Valid zoom values are numbers from zero up to the supported maximum zoom level. Larger zoom values correspond to a higher resolution. | | | zoomControl | boolean | optional | The enabled/disabled state of the Zoom control. | | | zoomControlOptions | ZoomControlOptions | optional | The display options for the Zoom control. | | |

Events

| Event Name | Returns | Notes | | ------------------------- | ----------- | ----------- | | onBoundsChanged | MapMouseEvent | This event is fired when the viewport bounds have changed. | | onCenterChanged | MapMouseEvent | This event is fired when the map center property changes. | | onClick | MapMouseEvent | This event is fired when the user clicks on the map. A MapMouseEvent with properties for the clicked location is returned unless a place icon was clicked, in which case an IconMouseEvent with a place ID is returned. IconMouseEvent and MapMouseEvent are identical, except that IconMouseEvent has the place ID field. The event can always be treated as an MapMouseEvent when the place ID is not important. The click event is not fired if a marker or info window was clicked. | | onContextMenu | MapMouseEvent | This event is fired when the DOM contextmenu event is fired on the map container. | | onDoubleClick | MapMouseEvent | This event is fired when the user double-clicks on the map. Note that the click event will sometimes fire once and sometimes twice, right before this one. | | onDrag | none | This event is repeatedly fired while the user drags the map. | | onDragEnd | none | This event is fired when the user stops dragging the map. | | onDragStart | none | This event is fired when the user starts dragging the map. | | onHeadingChanged | none | This event is fired when the map heading property changes. | | onIdle | none | This event is fired when the map becomes idle after panning or zooming. | | onMapCapabilitiesChanged | none | This event is fired when the map capabilities change | | onMapTypeIdChanged | none | This event is fired when the mapTypeId property changes. | | onMouseMove | MapMouseEvent | This event is fired whenever the user's mouse moves over the map container. | | onMouseOut | MapMouseEvent | This event is fired when the user's mouse exits the map container. | | onMouseOver | MapMouseEvent | This event is fired when the user's mouse enters the map container. | | onTilesLoaded | none | This event is fired when the visible tiles have finished loading. | | onZoomChanged | none | This event is fired when the map zoom property changes. | |

Next.js

[!IMPORTANT] To use the library in a Next.js project, you need to make the component client-side.