react-google-maps.js

React Google Maps
by @tomchentw
Getting started
Samples 
Geojson
Fork me on GitHub



Map data ©2015 Google
Terms of Use

2485 Hanning Avenue, Altadena, CA, United States
Report a map error






Map
Satellite
import {default as React, Component} from "react";

import {default as GoogleMap} from "../../../../../src/GoogleMap";
import {default as Marker} from "../../../../../src/Marker";
import {default as SearchBox} from "../../../../../src/SearchBox";

/*
 * https://developers.google.com/maps/documentation/javascript/examples/places-searchbox
 *
 * Add <script src="https://maps.googleapis.com/maps/api/js"></script> to your HTML to provide google.maps reference
 */
export default class SearchBoxExample extends Component {

  static inputStyle = {
    "border": "1px solid transparent",
    "borderRadius": "1px",
    "boxShadow": "0 2px 6px rgba(0, 0, 0, 0.3)",
    "boxSizing": "border-box",
    "MozBoxSizing": "border-box",
    "fontSize": "14px",
    "height": "32px",
    "marginTop": "27px",
    "outline": "none",
    "padding": "0 12px",
    "textOverflow": "ellipses",
    "width": "400px"
  }

  static mapCenter = {
    lat: 47.6205588,
    lng: -122.3212725
  }

  state = {
    bounds: null,
    center: SearchBoxExample.mapCenter,
    markers: []
  }

  _handle_bounds_changed = () => {
    this.setState({
      bounds: this.refs.map.getBounds(),
      center: this.refs.map.getCenter()
    });
  }

  _handle_places_changed = () => {
    const places = this.refs.searchBox.getPlaces();
    const markers = [];

    // Add a marker for each place returned from search bar
    places.forEach(function (place) {
      markers.push({
        position: place.geometry.location
      });
    });

    // Set markers; set map center to first search result
    const mapCenter = markers.length > 0 ? markers[0].position : this.state.center;

    this.setState({
      center: mapCenter,
      markers: markers
    });

    return;
  }

  render () {

    return (
      <GoogleMap
        center={this.state.center}
        containerProps={{
          ...this.props,
          style: {
            height: "100%"
          }
        }}
        defaultZoom={15}
        onBoundsChanged={this._handle_bounds_changed}
        ref="map">

        <SearchBox
          bounds={this.state.bounds}
          controlPosition={google.maps.ControlPosition.TOP_LEFT}
          onPlacesChanged={this._handle_places_changed}
          ref="searchBox"
          style={SearchBoxExample.inputStyle} />

        {this.state.markers.map((marker, index) => (
          <Marker position={marker.position} key={index} />
        ))}

      </GoogleMap>
    );

  }

}