google-maps-api-react-map
TypeScript icon, indicating that this package has built-in type declarations

1.1.3 • Public • Published

google-maps-api-react-map package

npm version

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.

Package Sidebar

Install

npm i google-maps-api-react-map

Weekly Downloads

13

Version

1.1.3

License

MIT

Unpacked Size

43.8 kB

Total Files

9

Last publish

Collaborators

  • crazy_coder