Bulid Web application use Google Maps

This article is based on the Tutorialzine tutorial, which can be found on GitHub

React.js

Since its official release, it has always been a hot topic and we don’t have much discussion about it. For the official tutorial, please refer to the React Chinese community or join the React China community promoted by @Tiye

React component architecture design

  • App: The main part, which contains methods for actions that can be performed by users like search, adding a location to favorites, etc. Other groups are nested within
  • CurrentLocation: The currently accessed address rendered on the map. The address can be added or removed by clicking on the star
  • LocationList: Shows the LocationItem of user Start
  • LocationItem: is a single location. When it is clicked, its corresponding address is searched and highlighted on the map
  • Map: Integrates the GMAPS implementation library and renders maps from Google maps
  • Search: is the component that is wrapped around the Search form. When it is submitted, the search location is triggered

Specific code implementation

App.js

var React = require('react'); var Search = require('./Search'); var Map = require('./Map'); var CurrentLocation = require('./CurrentLocation'); var LocationList = require('./LocationList'); Var App = React. CreateClass ({getInitialState(){var Favorites = []; var Favorites = []; if(localStorage.favorites){ favorites = JSON.parse(localStorage.favorites); } // DefaultAddress is Paris return {Favorites: Favorites, currentAddress: 'Paris, France', mapCoordinates: {lat: 48.856614, LNG: 2.3522219}}; }, toggleFavorite(address){ if(this.isAddressInFavorites(address)){ this.removeFromFavorites(address); } else{ this.addToFavorites(address); } }, addToFavorites(address){ var favorites = this.state.favorites; favorites.push({ address: address, timestamp: Date.now() }); this.setState({ favorites: favorites }); localStorage.favorites = JSON.stringify(favorites); }, removeFromFavorites(address){ var favorites = this.state.favorites; var index = -1; for(var i = 0; i < favorites.length; i++){ if(favorites[i].address == address){ index = i; break; }} // If the user clicks Cancel Start, delete it from the preferred arra if(Index! == -1){ favorites.splice(index, 1); this.setState({ favorites: favorites }); localStorage.favorites = JSON.stringify(favorites); } }, isAddressInFavorites(address){ var favorites = this.state.favorites; for(var i = 0; i < favorites.length; i++){ if(favorites[i].address == address){ return true; } } return false; }, searchForAddress(address){ var self = this; // Here's the part that calls the Google Maps API, which will use map.js' GMaps' geocode functionality GMaps. Geocode ({address: address, callback: function(results, status) { if (status ! == 'OK') return; var latlng = results[0].geometry.location; self.setState({ currentAddress: results[0].formatted_address, mapCoordinates: { lat: latlng.lat(), lng: latlng.lng() } }); }}); }, render(){ return ( <div> <h1>Your Google Maps Locations</h1> <Search onSearch={this.searchForAddress} /> <Map lat={this.state.mapCoordinates.lat} lng={this.state.mapCoordinates.lng} /> <CurrentLocation address={this.state.currentAddress} favorite={this.isAddressInFavorites(this.state.currentAddress)} onFavoriteToggle={this.toggleFavorite} /> <LocationList locations={this.state.favorites} activeLocationAddress={this.state.currentAddress} onClick={this.searchForAddress} /> </div> ); }}); module.exports = App;

CurrentLocation.js

var React = require('react'); var CurrentLocation = React.createClass({ toggleFavorite(){ this.props.onFavoriteToggle(this.props.address); }, render(){ var starClassName = "glyphicon glyphicon-star-empty"; if(this.props.favorite){ starClassName = "glyphicon glyphicon-star"; } return ( <div className="col-xs-12 col-md-6 col-md-offset-3 current-location"> <h4 id="save-location">{this.props.address}</h4> <span className={starClassName} onClick={this.toggleFavorite} aria-hidden="true"></span> </div> ); }}); module.exports = CurrentLocation;

LocationList.js

var React = require('react'); var LocationItem = require('./LocationItem'); var LocationList = React.createClass({ render(){ var self = this; var locations = this.props.locations.map(function(l){ var active = self.props.activeLocationAddress == l.address; Return < locationItem address={L.a ddress} return < locationItem address={L.a ddress} timestamp={l.timestamp} active={active} onClick={self.props.onClick} /> }); if(! locations.length){ return null; } return ( <div className="list-group col-xs-12 col-md-6 col-md-offset-3"> <span className="list-group-item active">Saved Locations</span> {locations} </div> ) } }); module.exports = LocationList;

LocationItem.js

var React = require('react');
var LocationItem = require('./LocationItem');
var moment = require('moment');

var LocationItem = React.createClass({

    handleClick(){
        this.props.onClick(this.props.address);
    },

    render(){

        var cn = "list-group-item";

        if(this.props.active){
            cn += " active-location";
        }

        return (
            <a className={cn} onClick={this.handleClick}>
                {this.props.address}
                <span className="createdAt">{ moment(this.props.timestamp).fromNow() }</span>
                <span className="glyphicon glyphicon-menu-right"></span>
            </a>
        )

    }

});

module.exports = LocationItem;

Map.js

var React = require('react');

var Map = React.createClass({

    componentDidMount(){ 
        this.componentDidUpdate();
    },

    componentDidUpdate(){

        if(this.lastLat == this.props.lat && this.lastLng == this.props.lng){
            return;
        }

        this.lastLat = this.props.lat;
        this.lastLng = this.props.lng

        var map = new GMaps({
            el: '#map',
            lat: this.props.lat,
            lng: this.props.lng
        });

        // Adding a marker to the location we are showing

        map.addMarker({
            lat: this.props.lat,
            lng: this.props.lng
        });
    },

    render(){

        return (
            <div className="map-holder">
                <p>Loading...</p>
                <div id="map"></div>
            </div>
        );
    }

});

module.exports = Map;

Search.js

var React = require('react'); var Search = React.createClass({ getInitialState() { return { value: '' }; }, handleChange(event) { this.setState({value: event.target.value}); }, handleSubmit(event){ event.preventDefault(); // Invok the onSearch callback passed to the component when the form is submitted this.props. OnSearch (this.state.value); // Unfocus text input field this.getDomNode ().querySelector('input').blur(); }, render() { return ( <form id="geocoding_form" className="form-horizontal" onSubmit={this.handleSubmit}> <div className="form-group"> <div className="col-xs-12 col-md-6 col-md-offset-3"> <div className="input-group"> <input type="text" className="form-control" id="address" placeholder="Find a location..." value={this.state.value} onChange={this.handleChange} /> <span className="input-group-btn"> <span className="glyphicon glyphicon-search" aria-hidden="true"></span> </span> </div> </div> </div> </form> ); }}); module.exports = Search;

main.js

var React = require('react');
var App = require('./components/App');

React.render(
  <App />,
  document.body
);

conclusion

From a beginners point of view, the most important thing about using React is the structure design of the Compoent, as well as the functions of props, states and callback events between the components being called