react-streetview
Simple React.js component for Google Street View.
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.
