{"id":13401182,"url":"https://github.com/fullstackreact/google-maps-react","last_synced_at":"2025-05-14T03:11:21.435Z","repository":{"id":8229339,"uuid":"57070925","full_name":"fullstackreact/google-maps-react","owner":"fullstackreact","description":"Companion code to the \"How to Write a Google Maps React Component\" Tutorial","archived":false,"fork":false,"pushed_at":"2023-01-18T13:02:12.000Z","size":1421,"stargazers_count":1637,"open_issues_count":295,"forks_count":816,"subscribers_count":36,"default_branch":"master","last_synced_at":"2025-05-08T22:13:03.345Z","etag":null,"topics":["google","google-api","google-maps","googlemap","react"],"latest_commit_sha":null,"homepage":"https://www.fullstackreact.com/articles/how-to-write-a-google-maps-react-component/","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/fullstackreact.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-04-25T19:42:01.000Z","updated_at":"2025-05-01T03:36:35.000Z","dependencies_parsed_at":"2023-02-10T15:00:34.084Z","dependency_job_id":null,"html_url":"https://github.com/fullstackreact/google-maps-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstackreact%2Fgoogle-maps-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstackreact%2Fgoogle-maps-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstackreact%2Fgoogle-maps-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstackreact%2Fgoogle-maps-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fullstackreact","download_url":"https://codeload.github.com/fullstackreact/google-maps-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254059518,"owners_count":22007771,"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","google-api","google-maps","googlemap","react"],"created_at":"2024-07-30T19:00:59.575Z","updated_at":"2025-05-14T03:11:16.420Z","avatar_url":"https://github.com/fullstackreact.png","language":"JavaScript","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"resources/readme/fullstackreact-google-maps-tutorial.png\" alt=\"Fullstack React Google Maps Tutorial\" /\u003e\n\u003c/p\u003e\n\n# Google Map React Component Tutorial [![Dolpins](https://cdn.rawgit.com/fullstackreact/google-maps-react/master/resources/readme/dolphins-badge-ff00ff.svg)](https://www.fullstackreact.com)\n\n\u003e A declarative Google Map React component using React, lazy-loading dependencies, current-location finder and a test-driven approach by the [Fullstack React](https://fullstackreact.com) team.\n\nSee the [demo](https://fullstackreact.github.io/google-maps-react) and [accompanying blog post](https://www.fullstackreact.com/articles/how-to-write-a-google-maps-react-component/).\n\n## Quickstart\n\nFirst, install the library:\n\n```shell\nnpm install --save google-maps-react\n```\n## Automatically Lazy-loading Google API\n\nThe library includes a helper to wrap around the Google maps API. The `GoogleApiWrapper` Higher-Order component accepts a configuration object which *must* include an `apiKey`. See [lib/GoogleApi.js](https://github.com/fullstackreact/google-maps-react/blob/master/src/lib/GoogleApi.js#L4) for all options it accepts.\n\n```javascript\nimport {GoogleApiWrapper} from 'google-maps-react';\n\n// ...\n\nexport class MapContainer extends React.Component {}\n\nexport default GoogleApiWrapper({\n  apiKey: (YOUR_GOOGLE_API_KEY_GOES_HERE)\n})(MapContainer)\n```\n\nAlternatively, the `GoogleApiWrapper` Higher-Order component can be configured by passing a function that will be called with whe wrapped component's `props` and should returned the configuration object.\n\n```javascript\nexport default GoogleApiWrapper(\n  (props) =\u003e ({\n    apiKey: props.apiKey,\n    language: props.language,\n  }\n))(MapContainer)\n```\n\nIf you want to add a loading container _other than the default_ loading container, simply pass it in the HOC, like so:\n\n```javascript\nconst LoadingContainer = (props) =\u003e (\n  \u003cdiv\u003eFancy loading container!\u003c/div\u003e\n)\n\nexport default GoogleApiWrapper({\n  apiKey: (YOUR_GOOGLE_API_KEY_GOES_HERE),\n  LoadingContainer: LoadingContainer\n})(MapContainer)\n```\n\n## Sample Usage With Lazy-loading Google API:\n\n```javascript\nimport {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';\n\nexport class MapContainer extends Component {\n  render() {\n    return (\n      \u003cMap google={this.props.google} zoom={14}\u003e\n\n        \u003cMarker onClick={this.onMarkerClick}\n                name={'Current location'} /\u003e\n\n        \u003cInfoWindow onClose={this.onInfoWindowClose}\u003e\n            \u003cdiv\u003e\n              \u003ch1\u003e{this.state.selectedPlace.name}\u003c/h1\u003e\n            \u003c/div\u003e\n        \u003c/InfoWindow\u003e\n      \u003c/Map\u003e\n    );\n  }\n}\n\nexport default GoogleApiWrapper({\n  apiKey: (YOUR_GOOGLE_API_KEY_GOES_HERE)\n})(MapContainer)\n```\n*Note: [Marker](#marker) and [InfoWindow](#infowindow--sample-event-handler-functions) components are disscussed below.*\n\n![](http://d.pr/i/C7qr.png)\n\n## Examples\n\nCheck out the example site at: [http://fullstackreact.github.io/google-maps-react](http://fullstackreact.github.io/google-maps-react)\n\n## Additional Map Props\nThe Map component takes a number of optional props.\n\nZoom: (Shown Above) takes a number with the higher value representing a tighter focus on the map's center.\n\nStyle: Takes CSS style object - commonly width and height.\n\n```javascript\nconst style = {\n  width: '100%',\n  height: '100%'\n}\n```\n\nContainer Style: Takes CSS style object - optional, commonly when you want to change from the default of position \"absolute\".\n\n```javascript\nconst containerStyle = {\n  position: 'relative',  \n  width: '100%',\n  height: '100%'\n}\n```\n\n```javascript\n    \u003cMap\n          containerStyle={containerStyle}\n```\n\ninitialCenter: Takes an object containing latitude and longitude coordinates. Sets the maps center upon loading.\n\n```javascript\n    \u003cMap\n          google={this.props.google}\n          style={style}\n          initialCenter={{\n            lat: 40.854885,\n            lng: -88.081807\n          }}\n          zoom={15}\n          onClick={this.onMapClicked}\n        \u003e\n```\ncenter: Takes an object containing latitude and longitude coordinates. Use this if you want to re-render the map after the initial render.\n\n```javascript\n    \u003cMap\n          google={this.props.google}\n          style={style}\n          center={{\n            lat: 40.854885,\n            lng: -88.081807\n          }}\n          zoom={15}\n          onClick={this.onMapClicked}\n        \u003e\n```\nbounds:  Takes a [google.maps.LatLngBounds()](https://developers.google.com/maps/documentation/javascript/reference/3/#LatLngBounds) object to adjust the center and zoom of the map.\n```javascript\nvar points = [\n    { lat: 42.02, lng: -77.01 },\n    { lat: 42.03, lng: -77.02 },\n    { lat: 41.03, lng: -77.04 },\n    { lat: 42.05, lng: -77.02 }\n]\nvar bounds = new this.props.google.maps.LatLngBounds();\nfor (var i = 0; i \u003c points.length; i++) {\n  bounds.extend(points[i]);\n}\nreturn (\n    \u003cMap\n        google={this.props.google}\n        initialCenter={{\n            lat: 42.39,\n            lng: -72.52\n        }}\n        bounds={bounds}\u003e\n    \u003c/Map\u003e\n);\n\n```\n\nThe following props are boolean values for map behavior:\n`scrollwheel`, `draggable`, `keyboardShortcuts`, `disableDoubleClickZoom`\n\nThe following props are boolean values for presence of controls on the map:\n`zoomControl`, `mapTypeControl`, `scaleControl`, `streetViewControl`, `panControl`, `rotateControl`, `fullscreenControl`\n\nThe following props are object values for control options such as placement of controls on the map:\n`zoomControlOptions`, `mapTypeControlOptions`, `streetViewControlOptions`\nSee Google Maps [Controls](https://developers.google.com/maps/documentation/javascript/controls) for more information.\n\n\nIt also takes event handlers described below:\n\n### Events\n\nThe `\u003cMap /\u003e` component handles events out of the box. All event handlers are optional.\n\n#### onReady\n\nWhen the `\u003cMap /\u003e` instance has been loaded and is ready on the page, it will call the `onReady` prop, if given. The `onReady` prop is useful for fetching places or using the autocomplete API for places.\n\n```javascript\nfetchPlaces(mapProps, map) {\n  const {google} = mapProps;\n  const service = new google.maps.places.PlacesService(map);\n  // ...\n}\n\nrender() {\n  return (\n    \u003cMap google={this.props.google}\n      onReady={this.fetchPlaces}\n      visible={false}\u003e\n        \u003cListing places={this.state.places} /\u003e\n    \u003c/Map\u003e\n  )\n}\n```\n\n#### onClick\n\nTo listen for clicks on the `\u003cMap /\u003e` component, pass the `onClick` prop:\n\n```javascript\nmapClicked(mapProps, map, clickEvent) {\n  // ...\n}\n\nrender() {\n  return (\n    \u003cMap google={this.props.google}\n      onClick={this.mapClicked} /\u003e\n  )\n}\n```\n\n#### onDragend\n\nWhen our user changes the map center by dragging the Map around, we can get a callback after the event is fired with the `onDragend` prop:\n\n```javascript\ncenterMoved(mapProps, map) {\n  // ...\n}\n\nrender() {\n  return (\n    \u003cMap google={this.props.google}\n      onDragend={this.centerMoved} /\u003e\n  )\n}\n```\n\nThe `\u003cMap /\u003e` component also listens to `onRecenter`, `onBounds_changed`, `onCenter_changed`, `onDblclick`, `onDragstart`, `onHeading_change`, `onIdle`, `onMaptypeid_changed`, `onMousemove`, `onMouseout`, `onMouseover`, `onProjection_changed`, `onResize`, `onRightclick`, `onTilesloaded`, `onTilt_changed`, and `onZoom_changed` events. See Google Maps [Events](https://developers.google.com/maps/documentation/javascript/events) for more information.\n\n### Visibility\n\nYou can control the visibility of the map by using the `visible` prop. This is useful for situations when you want to use the Google Maps API without a map. The `\u003cMap /\u003e` component will load like normal. See the [Google places demo](https://fullstackreact.github.io/google-maps-react/#/places)\n\nFor example:\n\n```javascript\n\u003cMap google={this.props.google}\n    visible={false}\u003e\n  \u003cListing places={this.state.places} /\u003e\n\u003c/Map\u003e\n```\n\n## Subcomponents\n\nThe `\u003cMap /\u003e` api includes subcomponents intended on being used as children of the `Map` component. Any child can be used within the `Map` component and will receive the three `props` (as children):\n\n* `map` - the Google instance of the `map`\n* `google` - a reference to the `window.google` object\n* `mapCenter` - the `google.maps.LatLng()` object referring to the center of the map instance\n\n### Marker\n\nTo place a marker on the Map, include it as a child of the `\u003cMap /\u003e` component.\n\n```javascript\n\u003cMap google={this.props.google}\n    style={{width: '100%', height: '100%', position: 'relative'}}\n    className={'map'}\n    zoom={14}\u003e\n  \u003cMarker\n    title={'The marker`s title will appear as a tooltip.'}\n    name={'SOMA'}\n    position={{lat: 37.778519, lng: -122.405640}} /\u003e\n  \u003cMarker\n    name={'Dolores park'}\n    position={{lat: 37.759703, lng: -122.428093}} /\u003e\n  \u003cMarker /\u003e\n  \u003cMarker\n    name={'Your position'}\n    position={{lat: 37.762391, lng: -122.439192}}\n    icon={{\n      url: \"/path/to/custom_icon.png\",\n      anchor: new google.maps.Point(32,32),\n      scaledSize: new google.maps.Size(64,64)\n    }} /\u003e\n\u003c/Map\u003e\n```\n\nThe `\u003cMarker /\u003e` component accepts a `position` prop that defines the location for the `position` on the map. It can be either a raw object or a `google.maps.LatLng()` instance.\n\nIf no `position` is passed in the `props`, the marker will default to the current position of the map, i.e. the `mapCenter` prop.\n\nYou can also pass any other `props` you want with the `\u003cMarker /\u003e`. It will be passed back through marker events.\n\nThe marker component can also accept a child InfoMarker component for situations where there is only 1 marker and 1 infowindow.\n\n```javascript\n   moveMarker(props, marker, e) {\n        console.log(e.latLng.lat(), e.latLng.lng()) // get the new coordinates after drag end\n    }\n```\n\n```javascript\n\u003cMarker\n  title=\"Location\"\n  id={1}\n  position={markerCenter}\n  draggable={true}\n  onDragend={this.moveMarker.bind(this)}\n  \u003e\n  \u003cInfoWindow\n    visible={showInfoWindow}\n    style={styles.infoWindow}\n    \u003e\n      \u003cdiv className={classes.infoWindow}\u003e\n        \u003cp\u003eClick on the map or drag the marker to select location where the incident occurred\u003c/p\u003e\n      \u003c/div\u003e\n  \u003c/InfoWindow\u003e\n\u003c/Marker\u003e\n```\n\n### Events\n\nThe `\u003cMarker /\u003e` component listens for events, similar to the `\u003cMap /\u003e` component.\n\n#### onClick\n\nYou can listen for an `onClick` event with the (appropriately named) `onClick` prop.\n\n```javascript\nonMarkerClick(props, marker, e) {\n  // ..\n}\n\nrender() {\n  return (\n    \u003cMap google={this.props.google}\u003e\n      \u003cMarker onClick={this.onMarkerClick}\n          name={'Current location'} /\u003e\n    \u003c/Map\u003e\n  )\n}\n```\n\n#### mouseover\n\nYou can also pass a callback when the user mouses over a `\u003cMarker /\u003e` instance by passing the `onMouseover` callback:\n\n```javascript\nonMouseoverMarker(props, marker, e) {\n  // ..\n}\n\nrender() {\n  return (\n    \u003cMap google={this.props.google}\u003e\n      \u003cMarker onMouseover={this.onMouseoverMarker}\n          name={'Current location'} /\u003e\n    \u003c/Map\u003e\n  )\n}\n```\n\n### Polygon\n\nTo place a polygon on the Map, set `\u003cPolygon /\u003e` as child of Map component.\n\n```javascript\nrender() {\n  const triangleCoords = [\n    {lat: 25.774, lng: -80.190},\n    {lat: 18.466, lng: -66.118},\n    {lat: 32.321, lng: -64.757},\n    {lat: 25.774, lng: -80.190}\n  ];\n\n  return(\n    \u003cMap google={this.props.google}\n        style={{width: '100%', height: '100%', position: 'relative'}}\n        className={'map'}\n        zoom={14}\u003e\n        \u003cPolygon\n          paths={triangleCoords}\n          strokeColor=\"#0000FF\"\n          strokeOpacity={0.8}\n          strokeWeight={2}\n          fillColor=\"#0000FF\"\n          fillOpacity={0.35} /\u003e\n    \u003c/Map\u003e\n  )\n}\n```\n\n#### Events\n\nThe `\u003cPolygon /\u003e` component listens to `onClick`, `onMouseover` and `onMouseout` events.\n\n### Polyline\n\nTo place a polyline on the Map, set `\u003cPolyline /\u003e` as child of Map component.\n\n```javascript\nrender() {\n  const triangleCoords = [\n    {lat: 25.774, lng: -80.190},\n    {lat: 18.466, lng: -66.118},\n    {lat: 32.321, lng: -64.757},\n    {lat: 25.774, lng: -80.190}\n  ];\n\n  return(\n    \u003cMap google={this.props.google}\n        style={{width: '100%', height: '100%', position: 'relative'}}\n        className={'map'}\n        zoom={14}\u003e\n        \u003cPolyline\n          path={triangleCoords}\n          strokeColor=\"#0000FF\"\n          strokeOpacity={0.8}\n          strokeWeight={2} /\u003e\n    \u003c/Map\u003e\n  )\n}\n```\n\n#### Events\n\nThe `\u003cPolyline /\u003e` component listens to `onClick`, `onMouseover` and `onMouseout` events.\n\n### InfoWindow\n\nThe `\u003cInfoWindow /\u003e` component included in this library is gives us the ability to pop up a \"more info\" window on our Google map.\n\n![](http://d.pr/i/16w0V.png)\n\nThe visibility of the `\u003cInfoWindow /\u003e` component is controlled by a `visible` prop. The `visible` prop is a boolean (`PropTypes.bool`) that shows the `\u003cInfoWindow /\u003e` when true and hides it when false.\n\nThere are two ways how to control a position of the `\u003cInfoWindow /\u003e` component.\nYou can use a `position` prop or connect the `\u003cInfoWindow /\u003e` component directly to an existing `\u003cMarker /\u003e` component by using a `marker` prop.\n\n```javascript\n//note: code formatted for ES6 here\nexport class MapContainer extends Component {\n  state = {\n    showingInfoWindow: false,\n    activeMarker: {},\n    selectedPlace: {},\n  };\n\n  onMarkerClick = (props, marker, e) =\u003e\n    this.setState({\n      selectedPlace: props,\n      activeMarker: marker,\n      showingInfoWindow: true\n    });\n\n  onMapClicked = (props) =\u003e {\n    if (this.state.showingInfoWindow) {\n      this.setState({\n        showingInfoWindow: false,\n        activeMarker: null\n      })\n    }\n  };\n\n  render() {\n    return (\n      \u003cMap google={this.props.google}\n          onClick={this.onMapClicked}\u003e\n        \u003cMarker onClick={this.onMarkerClick}\n                name={'Current location'} /\u003e\n\n        \u003cInfoWindow\n          marker={this.state.activeMarker}\n          visible={this.state.showingInfoWindow}\u003e\n            \u003cdiv\u003e\n              \u003ch1\u003e{this.state.selectedPlace.name}\u003c/h1\u003e\n            \u003c/div\u003e\n        \u003c/InfoWindow\u003e\n      \u003c/Map\u003e\n    )\n  }\n}\n```\n\n### Events\n\nThe `\u003cInfoWindow /\u003e` throws events when it's showing/hiding. Every event is optional and can accept a handler to be called when the event is fired.\n\n```javascript\n\u003cInfoWindow\n  onOpen={this.windowHasOpened}\n  onClose={this.windowHasClosed}\n  visible={this.state.showingInfoWindow}\u003e\n    \u003cdiv\u003e\n      \u003ch1\u003e{this.state.selectedPlace.name}\u003c/h1\u003e\n    \u003c/div\u003e\n\u003c/InfoWindow\u003e\n```\n\n#### onClose\n\nThe `onClose` event is fired when the `\u003cInfoWindow /\u003e` has been closed. It's useful for changing state in the parent component to keep track of the state of the `\u003cInfoWindow /\u003e`.\n\n#### onOpen\n\nThe `onOpen` event is fired when the window has been mounted in the Google map instance. It's useful for keeping track of the state of the `\u003cInfoWindow /\u003e` from within the parent component.\n\n### Circle\n\n![A red slightly transparent circle on a Google Map.  The map is centered around an area in Sao Paulo, Brazil and there is a peculiar lake on the map that is shaped like a man.](examples/screenshots/circle.png \"Circle\")\n\nTo place a circle on the Map, set `\u003cCircle /\u003e` as child of Map component.\n\n```javascript\nrender() {\n  const coords = { lat: -21.805149, lng: -49.0921657 };\n\n  return (\n    \u003cMap\n      initialCenter={coords}\n      google={this.props.google}\n      style={{width: 500, height: 500, position: 'relative'}}\n      zoom={14}\n    \u003e\n      \u003cCircle\n        radius={1200}\n        center={coords}\n        onMouseover={() =\u003e console.log('mouseover')}\n        onClick={() =\u003e console.log('click')}\n        onMouseout={() =\u003e console.log('mouseout')}\n        strokeColor='transparent'\n        strokeOpacity={0}\n        strokeWeight={5}\n        fillColor='#FF0000'\n        fillOpacity={0.2}\n      /\u003e\n    \u003c/Map\u003e\n  );\n}\n```\n\n#### Events\n\nThe `\u003cCircle /\u003e` component listens to `onClick`, `onMouseover` and `onMouseout` events.\n\nThe `GoogleApiWrapper` automatically passes the `google` instance loaded when the component mounts (and will only load it once).\n\n#### Custom Map Style\n\nTo set your own custom map style, import your custom map style in JSON format.\n\n```javascript\nconst mapStyle = [\n  {\n    featureType: 'landscape.man_made',\n    elementType: 'geometry.fill',\n    stylers: [\n      {\n        color: '#dceafa'\n      }\n    ]\n  },\n  ]\n\n _mapLoaded(mapProps, map) {\n    map.setOptions({\n       styles: mapStyle\n    })\n }\n\nrender() {\n  return (\n    \u003cMap\n      style={style}\n      google={this.props.google}\n      zoom={this.state.zoom}\n      initialCenter={this.state.center}\n      onReady={(mapProps, map) =\u003e this._mapLoaded(mapProps, map)}\n    \u003e\n      ...\n    \u003c/Map\u003e\n   );\n }\n      \n```\n\n## Manually loading the Google API\n\nIf you prefer not to use the automatic loading option, you can also pass the `window.google` instance as a `prop` to your `\u003cMap /\u003e` component.\n\n```javascript\n\u003cMap google={window.google} /\u003e\n```\n\n## Issues?\n\nIf you have some issues, please make an issue on the issues tab and try to include an example. We've had success with https://codesandbox.io\n\nAn example template might look like: [https://codesandbox.io/s/rzwrk2854](https://codesandbox.io/s/rzwrk2854)\n\n## Contributing\n\n```shell\ngit clone https://github.com/fullstackreact/google-maps-react.git\ncd google-maps-react\nnpm install\nmake dev\n```\n\nThe Google Map React component library uses React and the Google API to give easy access to the Google Maps library.\n\n___\n\n# Fullstack React Book\n\n\u003ca href=\"https://fullstackreact.com\"\u003e\n\u003cimg align=\"right\" src=\"resources/readme/fullstack-react-hero-book.png\" alt=\"Fullstack React Book\" width=\"155\" height=\"250\" /\u003e\n\u003c/a\u003e\n\nThis Google Map React component library was built alongside the blog post [How to Write a Google Maps React Component](https://www.fullstackreact.com/articles/how-to-write-a-google-maps-react-component/).\n\nThis repo was written and is maintained by the [Fullstack React](https://fullstackreact.com) team. In the book we cover many more projects like this. We walk through each line of code, explain why it's there and how it works.\n\nThis app is only one of several apps we have in the book. If you're looking to learn React, there's no faster way than by spending a few hours with the Fullstack React book.\n\n\u003cdiv style=\"clear:both\"\u003e\u003c/div\u003e\n\n## License\n [MIT](/LICENSE)\n","funding_links":[],"categories":["JavaScript","Uncategorized","React [🔝](#readme)"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffullstackreact%2Fgoogle-maps-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffullstackreact%2Fgoogle-maps-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffullstackreact%2Fgoogle-maps-react/lists"}