React app implemented with Google Search Location
JavaScript Other
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets/css
components
.gitignore
compiled.js
compiled.min.js
index.html
main.js
package.json
readme.md
yarn.lock

readme.md

React Google Map Location Search App

Updated for Current React

screen shot 2017-11-24 at 7 36 16 pm

Tutorial Article Here By Nick Anastasov

Here you can follow the steps, and I have added the steps to have the app running with the current React version.

Install

Packages you need:

browserify moment react react-dom reactify uglify-js watchify
Use this format:
npm install packageNameHere --save

React-DOM

The app tutorial is about a year old and you need to use React-Dom

Here are the following places that need React-DOM
In files Search.js | Map.js | Main.js at the top
var ReactDom = require('react-dom');

The original tutorial uses getDOMNode() in the Search.js file. React changed a few things. I found this article helpful to understand the changes.

  • Old Version

    handleSubmit(event){ event.preventDefault(); this.props.onSearch(this.state.value); this.getDOMNode().querySelector('input').blur(); },
  • New Verison

    handleSubmit(event){ event.preventDefault(); this.props.onSearch(this.state.value); ReactDom.findDOMNode(this).querySelector('input').blur(); },

CSS & GMAPS

I added this for the icons:

https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

And this for the GMAPS which makes using google maps API a breeze:

https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.24/gmaps.js

Other Notes

  • Reps, Reps Reps. I highly suggest coding it out, and not copy and paste. Certainly sse a working version for reference. You will learn more, promise.
  • If there are any problems, submit an issue!