Google Map React Component.
To install enter this into your command line:
npm install --save googlemap-react
To use as an import in you application include the below code:
import GoogleMap from 'googlemap-react';
To get acces to the Google Maps API you must create your API KEY, you can do this at https://developers.google.com/maps/documentation/javascript/get-api-key, once you have received you key insert into the script tag below and add to you html file:
<!-- dont forget to add this in your html -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
Built in form and submit button for origin and destination routing with step by step directions.
ClassNames: "container-map" "map" "map-form" "map-input" "map-directions-button" are provided for styling they are nested in that order. Also for directions styling we have: "container-directions" and "directions-item"
import React from 'react';
import ReactDOM from 'react-dom';
import GoogleMap from 'googlemap-react';
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<div>
<!-- nMap gets concatinated to a string to provide a unique id to the DOM every for every map instance -->
<GoogleMap nMap={ 1 } />
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));