{"id":15397047,"url":"https://github.com/ryanhefner/react-maps-google","last_synced_at":"2025-08-22T15:03:17.842Z","repository":{"id":39577043,"uuid":"128115222","full_name":"ryanhefner/react-maps-google","owner":"ryanhefner","description":"🗺 React components that make it easy to add Google maps and markers to your React projects.","archived":false,"fork":false,"pushed_at":"2023-12-19T18:55:20.000Z","size":26112,"stargazers_count":4,"open_issues_count":223,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2023-12-20T11:59:50.960Z","etag":null,"topics":["google-maps","google-maps-api","google-maps-markers-list","react","react-component"],"latest_commit_sha":null,"homepage":"https://www.pkgstats.com/pkg:react-maps-google","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ryanhefner.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"github":"ryanhefner","patreon":"ryanhefner","open_collective":"ryanhefner","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2018-04-04T20:03:52.000Z","updated_at":"2024-01-09T15:48:34.181Z","dependencies_parsed_at":"2024-01-09T15:47:58.378Z","dependency_job_id":"3b1c5239-7847-4a74-9cdc-0dc6c1673fc1","html_url":"https://github.com/ryanhefner/react-maps-google","commit_stats":{"total_commits":303,"total_committers":7,"mean_commits":"43.285714285714285","dds":0.5874587458745875,"last_synced_commit":"bc60b9e5b976d39b8eadff8bf7a702306791065c"},"previous_names":[],"tags_count":26,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Freact-maps-google","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Freact-maps-google/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Freact-maps-google/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Freact-maps-google/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryanhefner","download_url":"https://codeload.github.com/ryanhefner/react-maps-google/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245797411,"owners_count":20673851,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["google-maps","google-maps-api","google-maps-markers-list","react","react-component"],"created_at":"2024-10-01T15:36:03.691Z","updated_at":"2025-03-27T06:31:08.136Z","avatar_url":"https://github.com/ryanhefner.png","language":"JavaScript","funding_links":["https://github.com/sponsors/ryanhefner","https://patreon.com/ryanhefner","https://opencollective.com/ryanhefner"],"categories":[],"sub_categories":[],"readme":"# 🗺 react-maps-google\n\n[![npm](https://img.shields.io/npm/v/react-maps-google?style=flat-square)](https://www.pkgstats.com/pkg:react-maps-google)\n[![NPM](https://img.shields.io/npm/l/react-maps-google?style=flat-square)](LICENSE)\n[![npm](https://img.shields.io/npm/dt/react-maps-google?style=flat-square)](https://www.pkgstats.com/pkg:react-maps-google)\n[![Coveralls github](https://img.shields.io/coveralls/github/ryanhefner/react-maps-google?style=flat-square)](https://coveralls.io/github/ryanhefner/react-maps-google)\n[![CircleCI](https://img.shields.io/circleci/build/github/ryanhefner/react-maps-google?style=flat-square)](https://circleci.com/gh/ryanhefner/react-maps-google)\n![Snyk Vulnerabilities for GitHub Repo](https://img.shields.io/snyk/vulnerabilities/github/ryanhefner/react-maps-google?style=flat-square)\n\n\nReact components that make it easy to add Google maps and markers to your React projects.\n\n## Install\n\nVia [npm](https://npmjs.com/package/react-maps-google)\n\n```sh\nnpm install --save react-maps-google\n```\n\nVia [Yarn](https://yarn.fyi/react-maps-google)\n\n```sh\nyarn add react-maps-google\n```\n\n## How to use\n\nThis package includes the core `GoogleMap` component that renders a Google Map\ninto your React project. Along with `Marker` and `MarkerClusterer` components that\nmake it easy to compose markers into your map instances.\n\n### `\u003cGoogleMap /\u003e` Component\n\n#### Properties\n\n* `apiKey:String` **Required** - Google Maps Javascript API key. [Guide to get an API key](https://developers.google.com/maps/documentation/javascript/get-api-key)\n* `async:Bool` - True loads Google Maps script asynchronously. Defaults to true.\n* `options:Object` - Options for customizing/styling the map. [MapOptions Interface](https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions)\n* `onReady:Function` - Called when the Google Maps script has initialized `(map) =\u003e {}`\n* `onBoundsChange:Function` - Called when the `bounds_changed` event is fired from the map. `(map) =\u003e {}`\n* `onCenterChange:Function` - Called when the `change_changed` event is fired from the map. `(map) =\u003e {}`\n* `onClick:Function` - Called when the `click` event is fired from the map. `(map, event) =\u003e {}`\n* `onDoubleClick:Function` - Called when the `dblclick` event is fired from the map. `(map, event) =\u003e {}`\n* `onDrag:Function` - Called when the `drag` event is fired from the map. `(map) =\u003e {}`\n* `onDragEnd:Function` - Called when the `dragend` event is fired from the map. `(map) =\u003e {}`\n* `onDragStart:Function` - Called when the `dragstart` event is fired from the map. `(map) =\u003e {}`\n* `onHeadingChange:Function` - Called when the `heading_changed` event is fired from the map. `(map) =\u003e {}`\n* `onIdle:Function` - Called when the `idle` event is fired from the map. `(map) =\u003e {}`\n* `onMapTypeIdChange:Function` - Called when the `maptypeid_changed` event is fired from the map. `(map) =\u003e {}`\n* `onMouseMove:Function` - Called when the `mousemove` event is fired from the map. `(map, event) =\u003e {}`\n* `onMouseOut:Function` - Called when the `mouseout` event is fired from the map. `(map, event) =\u003e {}`\n* `onMouseOver:Function` - Called when the `mouseover` event is fired from the map. `(map, event) =\u003e {}`\n* `onProjectionChange:Function` - Called when the `projection_changed` event is fired from the map. `(map) =\u003e {}`\n* `onRightClick:Function` - Called when the `rightclick` event is fired from the map. `(map, event) =\u003e {}`\n* `onTilesLoad:Function` - Called when the `tilesloaded` event is fired from the map. `(map) =\u003e {}`\n* `onTiltChange:Function` - Called when the `tilt_changed` event is fired from the map. `(map) =\u003e {}`\n* `onZoomChange:Function` - Called when the `zoom_changed` event is fired from the map. `(map) =\u003e {}`\n\nAll callbacks return a reference to the `google.maps.Map` instance rendered within the\ncomponent and the associated `Event` (where supported).\n\n#### Example\n\n```js\nimport React from 'react';\nimport GoogleMap, { Marker } from 'react-maps-google';\n\nconst ExampleMap = (props) =\u003e {\n  return (\n    \u003cGoogleMap apiKey=\"[insert your api key here]\"\u003e\n      \u003cMarker position={{lat: 40.7174343, lng: -73.9930319}} /\u003e\n    \u003c/GoogleMap\u003e\n  );\n}\n```\n\n### `\u003cMarker /\u003e` Component\n\n#### Properties\n\n* `position:Object` **Required** - The latitude and longitude coordinates to render the marker. `{{lat: 0, lng: 0}}`\n* `map:Object` - Reference the to the `google.maps.Map` instance, passed to the component within `GoogleMap`.\n* `options:Object` - Options for customizing/styling the marker. [MarkerOptions Interface](https://developers.google.com/maps/documentation/javascript/reference/3.exp/marker?authuser=0#MarkerOptions)\n* `onAnimationChange:Function` - Called when the `animation_changed` event is fired from the marker. `(marker) =\u003e {}`\n* `onClick:Function` - Called when the `click` event is fired from the marker. `(marker, event) =\u003e {}`\n* `onClickkableChange:Function` - Called when the `clickable_changed` event is fired from the marker. `(marker) =\u003e {}`\n* `onCursorChange:Function` - Called when the `cursor_changed` event is fired from the marker. `(marker) =\u003e {}`\n* `onDoubleClick:Function` - Called when the `dblclick` event is fired from the marker. `(marker, event) =\u003e {}`\n* `onDrag:Function` - Called when the `drag` event is fired from the marker. `(marker, event) =\u003e {}`\n* `onDragEnd:Function` - Called when the `dragend` event is fired from the marker. `(marker, event) =\u003e {}`\n* `onDraggableChange:Function` - Called when the `draggable_changed` event is fired from the marker. `(marker) =\u003e {}`\n* `onDragStart:Function` - Called when the `dragstart` event is fired from the marker. `(marker, event) =\u003e {}`\n* `onFlatChange:Function` - Called when the `flat_changed` event is fired from the marker. `(marker) =\u003e {}`\n* `onIconChange:Function` - Called when the `icon_changed` event is fired from the marker. `(marker) =\u003e {}`\n* `onMouseDown:Function` - Called when the `mousedown` event is fired from the marker. `(marker, event) =\u003e {}`\n* `onMouseOut:Function` - Called when the `mouseout` event is fired from the marker. `(marker, event) =\u003e {}`\n* `onMouseOver:Function` - Called when the `mouseover` event is fired from the marker. `(marker, event) =\u003e {}`\n* `onMouseUp:Function` - Called when the `mouseup` event is fired from the marker. `(marker, event) =\u003e {}`\n* `onPositionChange:Function` - Called when the `position_changed` event is fired from the marker. `(marker) =\u003e {}`\n* `onRightClick:Function` - Called when the `rightclick` event is fired from the marker. `(marker, event) =\u003e {}`\n* `onShapeChange:Function` - Called when the `shape_changed` event is fired from the marker. `(marker) =\u003e {}`\n* `onTitleChange:Function` - Called when the `title_changed` event is fired from the marker. `(marker) =\u003e {}`\n* `onVisibleChange:Function` - Called when the `visible_changed` event is fired from the marker. `(marker) =\u003e {}`\n* `onZIndexChange:Function` - Called when the `zindex_changed` event is fired from the marker. `(marker) =\u003e {}`\n\n#### Example\n\n```js\nimport React, { Component } from 'react';\nimport GoogleMap, { Marker } from 'react-maps-google';\n\nclass ExampleMap extends Component {\n  constructor(props) {\n    super(props);\n\n    this.onMarkerClick = this.onMarkerClick.bind(this);\n  }\n\n  onMarkerClick(marker, event) {\n\n  }\n\n  render() {\n    return (\n      \u003cGoogleMap apiKey=\"[insert your api key here]\"\u003e\n        \u003cMarker\n          position={{lat: 40.7174343, lng: -73.9930319}}\n          onClick={this.onMarkerClick}\n        /\u003e\n      \u003c/GoogleMap\u003e\n    );\n  }\n}\n\n```\n\n### `\u003cMarkerClusterer /\u003e` Component\n\n_[in development]_\n\n## License\n\n[MIT](LICENSE) © [Ryan Hefner](https://www.ryanhefner.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanhefner%2Freact-maps-google","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanhefner%2Freact-maps-google","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanhefner%2Freact-maps-google/lists"}