Sending my current position to google maps in react

Viewed 994

In my app I implemented a module that get's latidude and longitude of my current position and now I want to export this data to googlemap components somehow so the default position would be overwritten by my current one.

Here is my code structure: location.js

import React from 'react';
import {geolocated} from 'react-geolocated';

class Demo extends React.Component {
render() {

return !this.props.isGeolocationAvailable
  ? <div>Your browser does not support Geolocation</div>
  : !this.props.isGeolocationEnabled
    ? <div>Geolocation is not enabled</div>
    : this.props.coords
      ? <table>
        <tbody>
          <tr><td>latitude</td><td>{this.props.coords.latitude}</td></tr>
          <tr><td>longitude</td><td>{this.props.coords.longitude}</td></tr>
        </tbody>
      </table>
      : <div>Getting the location data&hellip; </div>;
  }
}

export default geolocated({
 positionOptions: {
enableHighAccuracy: false,
},
 userDecisionTimeout: 5000,
})(Demo); 

My googlemap file:

import React from 'react';

export default class GoogleMap extends React.Component{
constructor(){
    super();
    this.state = {
        zoom: 13,
        maptype: 'roadmap',
        lat: -33.8688,
        lng: 141.2195
    }
}

componentDidMount(){
    let map = new window.google.maps.Map(document.getElementById('map'), {
        center: {
            lat: this.state.lat, 
            lng: this.state.lng},
        zoom: 13,
        mapTypeId: 'roadmap',
    })
    console.log('loaded')

}

render(){
    return(
        <div>
            <div id='map' />
        </div>
    )
}
}

And finally my app.js file (the important bits):

import GoogleMap from './components/map';

import Demo from './components/local'

class App extends Component {
render(){
return(
<div> <Demo />  <GoogleMap /> </div>)

I know I have to somehow export the state between parent and then children, but I got really confused there on bigger project and got completely lost when working with 3rd party libs

1 Answers
Related