{"_id":"@afzalh/google-map-react","_rev":"1-31515f9238f75d4f9ab9952668fe93da","name":"@afzalh/google-map-react","dist-tags":{"latest":"1.1.8"},"versions":{"1.1.8":{"name":"@afzalh/google-map-react","version":"1.1.8","description":"isomorphic google map react component, allows render react components on the google map","main":"lib/index","scripts":{"build:lib":"babel ./src -d lib","build:umd":"webpack src/index_umd.js dist/GoogleMapReact.js --config webpack.config.dev.js","build:umd:min":"webpack src/index_umd.js dist/GoogleMapReact.min.js --config webpack.config.prod.js","build":"yarn run build:lib && yarn run build:umd && yarn run build:umd:min","clean":"rimraf lib dist","prepublish":"yarn run clean && yarn run build","format":"prettier --trailing-comma es5 --single-quote --write 'src/**/*.js' 'src/**/*.js'","format:dev":"prettier --trailing-comma es5 --single-quote --write 'develop/**/*.js' 'develop/**/*.js'","lint":"eslint src","lint:dev":"eslint develop","test":"NODE_ENV=eee mocha --compilers js:babel-register --recursive --require babel-polyfill","test:watch":"NODE_ENV=eee mocha --compilers js:babel-register --recursive  --require babel-polyfill --watch","start":"kotatsu serve --port 4000 --config ./develop/config/index.babel.js --presets es2015,stage-0,react,react-hmre ./develop/Main.js","precommit":"lint-staged"},"repository":{"type":"git","url":"git+https://github.com/AfzalH/google-map-react.git"},"keywords":["react","reactjs","google","map","maps","isomorphic","render","component","javascript","react-component"],"author":{"name":"AfzalH https://github.com/AfzalH"},"license":"MIT","bugs":{"url":"https://github.com/AfzalH/google-map-react/issues"},"homepage":"https://github.com/AfzalH/google-map-react#readme","peerDependencies":{"react":"^0.14.0 || ^15.0.0 || ^16.0.0","react-dom":"^0.14.0 || ^15.0.0 || ^16.0.0"},"dependencies":{"@mapbox/point-geometry":"^0.1.0","eventemitter3":"^1.1.0","prop-types":"^15.5.6","scriptjs":"^2.5.7"},"devDependencies":{"autoprefixer":"^6.3.6","babel-cli":"^6.14.0","babel-core":"^6.14.0","babel-eslint":"^6.0.4","babel-loader":"^6.2.5","babel-plugin-webpack-loaders":"^0.5.0","babel-polyfill":"^6.13.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.11.1","babel-preset-react-hmre":"^1.1.1","babel-preset-stage-0":"^6.5.0","babel-register":"^6.14.0","css-loader":"^0.23.1","eslint":"^3.17.1","eslint-config-airbnb":"^14.0.0","eslint-config-prettier":"^1.5.0","eslint-plugin-babel":"^4.1.1","eslint-plugin-import":"^2.2.0","eslint-plugin-jsx-a11y":"^4.0.0","eslint-plugin-prettier":"^2.0.1","eslint-plugin-react":"^6.8.0","expect":"^1.11.1","file-loader":"^0.8.5","husky":"^0.13.3","jsdom":"^6.5.1","kotatsu":"^0.14.0","lint-staged":"^3.4.0","mocha":"^2.3.3","node-sass":"^3.7.0","normalize.css":"^4.1.1","postcss-loader":"^0.9.1","prettier":"^0.22.0","react":"^16.0.0","react-dom":"^16.4.1","react-motion":"^0.4.4","react-router":"^3.2.0","recompose":"^0.26.0","reselect":"^2.5.1","rimraf":"^2.4.3","rxjs":"^5.0.0-beta.8","sass-loader":"^3.2.0","style-loader":"^0.13.1","url-loader":"^0.5.7","webpack":"^1.12.2"},"lint-staged":{"*.js":["prettier --trailing-comma es5 --single-quote --write","git add"]},"gitHead":"e8285adfd90ad7133c108e498bc26a0a78f4aa09","_id":"@afzalh/google-map-react@1.1.8","_nodeVersion":"10.14.1","_npmVersion":"6.14.4","dist":{"integrity":"sha512-3Nk/o6BdyhQJH2zJXcArAyxw1+u4x94NjJVvEKOT4rjSsdlDr/E1EoU1n7iZ44iPUNknzlQiUoI8bgGiMIYdig==","shasum":"f96b7a6fd09824874f390674a070745c7f804980","tarball":"https://registry.npmjs.org/@afzalh/google-map-react/-/google-map-react-1.1.8.tgz","fileCount":79,"unpackedSize":378069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesTtxCRA9TVsSAnZWagAAOCQP+wSGOZlCde8ThPcttKDn\n80dVxMioNStGEd+hQZ6Zia0ON5ZRYji1ggSn7xemfK0i7WiE5t5A0UsiHze+\noZdclXQh+C6JuYnZwZqguCo6uRORsqeIdbJ75zxWY2KiW8nI/5HdMh+TJpj1\nTyZM7w82i9mxnjvk16Wtd2OHcYOj3j2Btotwngbnatq/B0788wY+DSd6FVbP\nuuQLU/6mJt9xuxKuF4Z3ypqDK0G3ueL78b8Ok5X2Zh13eTxkv7KfF6Fj6MVZ\nZccrrly4h1mpMs/DpN1GzHY30+t4FSCGOv/R4Fb4s8lReF0lpc1fuDpcp3uu\nMIVbpltaxbC+6fIyIOB2tsOUmjqid5mM8wIuuVCd/+CJJN4ZQCtV5k7A8rqo\nygE6LIH6ZB7SORQiYpJECKYkkq4abSy5JVIkv3SyJJ729r8SLKYdT6avGZtS\nI//TXAJsUkNSM6xzyGOJL0uM6D1r5Y2OaASvGIwvP8yedAkrzkQhLPg04soI\nSIjyk2sq5j+wnwkGKt8vRFFokk2bL62fr+xO33ZFidAPBuLai0Ue7g24/Kax\nnJFe2TFqOHcNF1IyBLgEmaoESzivTFFYI7Cowa9zoMwU6+3j8viuy441qI5W\nPqpfX7DBS3yrpDIP7MjE9unds2rbcPuqG2CU3xaaYQobh+4yTiTqOKKsHiES\nAdGg\r\n=hS5B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE+I0bQ6xtfRmQVvXEYt4VRUxc1q0CNWDinLZhj0IDewAiEAlEZ20dyrZzU/FuCnfyNVLQDN1hw1IknZD+A8ByZ2IME="}]},"maintainers":[{"name":"afzalh","email":"afzal.csedu@gmail.com"}],"_npmUser":{"name":"afzalh","email":"afzal.csedu@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/google-map-react_1.1.8_1588673392638_0.6099032186573214"},"_hasShrinkwrap":false}},"time":{"created":"2020-05-05T10:09:52.606Z","1.1.8":"2020-05-05T10:09:52.733Z","modified":"2022-04-04T11:52:56.323Z"},"maintainers":[{"name":"afzalh","email":"afzal.csedu@gmail.com"}],"description":"isomorphic google map react component, allows render react components on the google map","homepage":"https://github.com/AfzalH/google-map-react#readme","keywords":["react","reactjs","google","map","maps","isomorphic","render","component","javascript","react-component"],"repository":{"type":"git","url":"git+https://github.com/AfzalH/google-map-react.git"},"author":{"name":"AfzalH https://github.com/AfzalH"},"bugs":{"url":"https://github.com/AfzalH/google-map-react/issues"},"license":"MIT","readme":"# Google Map React &middot; [![npm version](https://badge.fury.io/js/google-map-react.svg)](http://badge.fury.io/js/google-map-react) [![Build Status](https://travis-ci.org/google-map-react/google-map-react.svg?branch=master)](https://travis-ci.org/google-map-react/google-map-react) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](github.com/google-map-react/google-map-react/CONTRIBUTING.md)\n\n`google-map-react` is a component written over a small set of the [Google Maps API](https://developers.google.com/maps/). It allows you to render any React component on the Google Map. It is fully isomorphic and can render on a server. Additionally, it can render map components in the browser even if the Google Maps API is not loaded. It uses an internal, tweakable hover algorithm - every object on the map can be hovered.\n\nIt allows you to create interfaces like this [example](http://google-map-react.github.io/google-map-react/map/main) *(You can scroll the table, zoom/move the map, hover/click on markers, and click on table rows)*\n\n## Getting started\n\nIn the simple case you just need to add `lat` and `lng` props to any child of `GoogleMapReact` component.\n\n[See it in action at jsbin](https://jsbin.com/ruwogapuke/1/edit?js,output)\n\n```javascript\nimport React, { Component } from 'react';\nimport GoogleMapReact from 'google-map-react';\n\nconst AnyReactComponent = ({ text }) => <div>{text}</div>;\n\nclass SimpleMap extends Component {\n  static defaultProps = {\n    center: {\n      lat: 59.95,\n      lng: 30.33\n    },\n    zoom: 11\n  };\n\n  render() {\n    return (\n      // Important! Always set the container height explicitly\n      <div style={{ height: '100vh', width: '100%' }}>\n        <GoogleMapReact\n          bootstrapURLKeys={{ key: /* YOUR KEY HERE */ }}\n          defaultCenter={this.props.center}\n          defaultZoom={this.props.zoom}\n        >\n          <AnyReactComponent\n            lat={59.955413}\n            lng={30.337844}\n            text=\"My Marker\"\n          />\n        </GoogleMapReact>\n      </div>\n    );\n  }\n}\n\nexport default SimpleMap;\n```\n\n### My map doesn't appear!\n\n- Make sure the container element has width and height. The map will try to fill the parent container, but if the container has no size, the map will collapse to 0 width / height. This is not a requirement for google-map-react, [its a requirement for google-maps in general](https://developers.google.com/maps/documentation/javascript/tutorial).\n\n\n## Installation\n\nnpm:\n```\nnpm install --save google-map-react\n```\n\nyarn:\n```\nyarn add google-map-react\n```\n\n## Features\n\n### Works with your Components\n\nInstead of the default Google Maps markers, balloons and other map components, you can render your cool animated react components on the map.\n\n### Isomorphic Rendering\n\nIt renders on the server. *(Welcome search engines)* *(you can disable javascript in browser dev tools, and reload any example page to see how it works)*\n\n### Component Positions Calculated Independently of Google Maps API\n\nIt renders components on the map before (and even without) the Google Maps API loaded.\n\n### Google Maps API Loads on Demand\n\nThere is no need to place a `<script src=` tag at top of page. The Google Maps API loads upon the first usage of the `GoogleMapReact` component.\n\n### Use Google Maps API \n\nYou can access to Google Maps `map` and `maps` objects by using `onGoogleApiLoaded`, in this case you will need to set `yesIWantToUseGoogleMapApiInternals` to `true`\n\n```javascript\n...\n\nconst handleApiLoaded = (map, maps) => {\n  // use map and maps objects\n};\n\n...\n\n<GoogleMapReact\n  bootstrapURLKeys={{ key: /* YOUR KEY HERE */ }}\n  defaultCenter={this.props.center}\n  defaultZoom={this.props.zoom}\n  yesIWantToUseGoogleMapApiInternals\n  onGoogleApiLoaded={({ map, maps }) => handleApiLoaded(map, maps)}\n>\n  <AnyReactComponent\n    lat={59.955413}\n    lng={30.337844}\n    text=\"My Marker\"\n  />\n</GoogleMapReact>\n```\n\nPST: Remember to set `yesIWantToUseGoogleMapApiInternals` to true.\n\n[Example here](https://github.com/google-map-react/google-map-react-examples/blob/master/src/examples/Main.js#L69)\n\n### Internal Hover Algorithm\n\nNow every object on the map can be hovered (however, you can still use css hover selectors if you want). If you try zooming out here [example](http://google-map-react.github.io/google-map-react/map/main), you will still be able to hover on almost every map marker.\n\n## Examples\n\n* Placing react components on the map:\n[simple](http://google-map-react.github.io/google-map-react/map/simple/) ([source](https://github.com/google-map-react/old-examples/blob/master/web/flux/components/examples/x_simple/simple_map_page.jsx))\n\n* Custom map options:\n[example](http://google-map-react.github.io/google-map-react/map/options/) ([source](https://github.com/google-map-react/old-examples/blob/master/web/flux/components/examples/x_options/options_map_page.jsx))\n\n* Hover effects:\n[simple hover](http://google-map-react.github.io/google-map-react/map/simple_hover/) ([source](https://github.com/google-map-react/old-examples/blob/master/web/flux/components/examples/x_simple_hover/simple_hover_map_page.jsx));\n[distance hover](http://google-map-react.github.io/google-map-react/map/distance_hover/) ([source](https://github.com/google-map-react/old-examples/blob/master/web/flux/components/examples/x_distance_hover/distance_hover_map_page.jsx))\n\n* GoogleMap events:\n[example](http://google-map-react.github.io/google-map-react/map/events/) ([source](https://github.com/google-map-react/old-examples/blob/master/web/flux/components/examples/x_events/events_map_page.jsx))\n\n* Example project:\n[main](http://google-map-react.github.io/google-map-react/map/main/) ([source](https://github.com/google-map-react/old-examples/blob/master/web/flux/components/examples/x_main/main_map_block.jsx)); [balderdash](http://google-map-react.github.io/google-map-react/map/balderdash/) (same source as main)\n\n* Clustering example using Hooks (**new**: [source](https://github.com/leighhalliday/google-maps-clustering), [article](https://www.leighhalliday.com/google-maps-clustering)) [clustering-with-hooks](https://google-maps-clustering.netlify.com/)\n\n* Clustering example ([source](https://github.com/istarkov/google-map-clustering-example))\n[google-map-clustering-example](http://istarkov.github.io/google-map-clustering-example/)\n\n* How to render thousands of markers (**new**: [source](https://github.com/istarkov/google-map-thousands-markers))\n[google-map-thousands-markers](https://istarkov.github.io/google-map-thousands-markers/)\n\n* Examples:\n[Examples](https://github.com/google-map-react/google-map-react-examples)\n[Old examples](https://github.com/google-map-react/old-examples)\n\n* jsbin example\n[jsbin example](https://jsbin.com/ruwogapuke/1/edit?js,output)\n\n* webpackbin examples (**new**)\n[docs with webpackbin examples](./DOC.md) (In progress)\n\n* local develop example (new)\n[develop example](./develop)\n\n## Documentation\n\nYou can find the documentation here:\n\n- [API Reference](./API.md)\n\n- [NEW DOCS](./DOC.md) (In progress)\n\n## Contribute\n\nTo get a reloadable env, with map, clone this project and\n\n```shell\nnpm install\nnpm run start\n# open browser at localhost:4000\n```\n\n## Thank you\n\n(*Really big thanks to [April Arcus](https://github.com/AprilArcus) for documentation fixes*)\n\n(*thank you [Dan Abramov](http://gaearon.github.io/react-dnd/) for titles structure*)\n\n(*great thanks to [Vladimir Akimov](https://github.com/b2whats) he knows why*)\n\n## License\n\nMIT (http://www.opensource.org/licenses/mit-license.php)\n\n## Known Issues\n\n* Older browsers (http://caniuse.com/#feat=promises) will need a ES6 Promise polyfill in order to work.\n\n## !!! We are looking for contributors\nWe're actively looking for contributors, please send a message to the Owner or any of the Collaborators.\n","readmeFilename":"README.md"}