Google street view component for React.js

by React

react-streetview

Simple React.js component for Google Street View.

View demo Download Source

Installation

The easiest way to use react-streetview is to install it from NPM and include it in your own React build process (using Browserify, Webpack, etc).

npm install react-streetview --save

You can also use the standalone build by including dist/react-streetview.js in your page. If you use this, make sure you have already included React, and it is available as a global variable.

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import ReactStreetview from 'react-streetview';

class App extends React.Component {

	render() {
		// see https://developers.google.com/maps/documentation/javascript
		const googleMapsApiKey = 'YOUR_API_KEY';

		// see https://developers.google.com/maps/documentation/javascript/3.exp/reference#StreetViewPanoramaOptions
		const streetViewPanoramaOptions = {
			position: {lat: 46.9171876, lng: 17.8951832},
			pov: {heading: 100, pitch: 0},
			zoom: 1
		};

		return (
			<div style={{
				width: '800px',
				height: '450px',
				backgroundColor: '#eeeeee'
			}}>
				<ReactStreetview
					apiKey={googleMapsApiKey}
					streetViewPanoramaOptions={streetViewPanoramaOptions}
				/>
			</div>
		);
	}
}

ReactDOM.render(<App />, document.getElementById('app'));

Development (src, lib and the build process)

To build the examples locally, run:

npm install
npm start

Then open localhost:8000 in a browser.

GitHub