<div id="root"></div>
/* layout */

body {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 15px;
}

.row {
	display: flex;
	flex-direction: row;
	width: 100%;
}

.col {
    flex: 1;
	padding: 15px;
}

.row > .col:first-child {
	border-right: 1px solid #ccc;
	max-width: 400px;
}

.row > .col:last-child {
	background: #fafafa;
}

@media all and (max-width: 767px) {
    .row {
        flex-direction: column;
    }

    .row > .col:first-child {
        border-right: none;
        max-width: none;
    }
}
const { Component } = React
const {
	ReactiveBase,
	SelectedFilters,
} = ReactiveSearch;
const {
	ReactiveMap,
	GeoDistanceSlider,
} = ReactiveMaps;

class MyApp extends Component {
  render () {
    return (
			<ReactiveBase
		app="reactivemap_demo"
		credentials="y4pVxY2Ok:c92481e2-c07f-4473-8326-082919282c18"
		type="meetupdata1"
		mapKey="AIzaSyBQdVcKCe0q_vOBDUvJYpzwGpt_d_uTj4Q"
	>
		<div className="row">
			<div className="col">
				<GeoDistanceSlider
					title="Location"
					componentId="GeoDistanceSlider"
					placeholder="Search Location"
					dataField="location"
					unit="mi"
					URLParams
					range={{
						start: 10,
						end: 300,
					}}
				/>
			</div>

			<div className="col">
				<SelectedFilters />
				<ReactiveMap
					componentId="map"
					dataField="location"
					defaultMapStyle="Light Monochrome"
					title="Reactive Maps"
					defaultZoom={13}
					defaultCenter={{ lat: 37.74, lng: -122.45 }}
					react={{
						and: 'GeoDistanceSlider',
					}}
				/>
			</div>
		</div>
	</ReactiveBase>
	  );
  }
}

ReactDOM.render(
  <MyApp />,
  document.getElementById('root')
);
View Compiled

External CSS

  1. https://use.fontawesome.com/releases/v5.0.2/css/all.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js
  3. https://maps.google.com/maps/api/js?key=AIzaSyBQdVcKCe0q_vOBDUvJYpzwGpt_d_uTj4Q&v=3.31&libraries=places
  4. https://cdn.rawgit.com/appbaseio/reactivesearch/dev/packages/web/umd/reactivesearch.js
  5. https://cdn.rawgit.com/appbaseio/reactivesearch/dev/packages/maps/umd/reactivemaps.js