google-maps-api-react-map

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.