React geo location component based on Google Maps
The component uses Google Maps API to fetch the locations. It uses Awesomplete as a hard dependency for the dropdown.
Check out the demo here.
Installation
npm install react-place
Dependencies
- Of course react and react-dom. You need to have these modules installed.
- Awesomplete - installed automatically while running
npm install react-place
. It comes with the component so you don't need to have it loaded on the page. - Google Maps API - you have to add
<script src="//maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
to your page to have the component working.
Usage (ES6)
;;; var location;var container = document; var { // data.description // data.coords.lat // data.coords.lng}; location = ReactDOM;
Usage ES5 (with bundling)
var React = ;var ReactDOM = ;var Location = ;var createLocation = React; { // data.description // data.coords.lat // data.coords.lng} var container = document;var LocationComp = ; var location = ReactDOM;
If you need to update the country dynamically use the following API:
location;
Usage ES5 (no bundling)
Download react-place.min.js file and add it to your page.
<script src="//maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script><script src="https://fb.me/react-0.14.3.js"></script><script src="https://fb.me/react-dom-0.14.3.js"></script><script src="react-place.min.js"></script><script> var createLocation = React; { // data.description // data.coords.lat // data.coords.lng } window { var container = document; var LocationComp = ; var l = ReactDOM; }; </script>
Testing
npm run test