Show GoogleMyMap and My current location with geolocation

googleCurrentLocation.js

import React, {PropTypes} from 'react'
import GoogleMap from 'google-map-react';
import navigator from 'navigator';

class HogeCourseMap extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      latitude: null,
      longitude: null,
      error: null,
    };
  }

  componentDidMount() {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        this.setState({
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
          error: null,
        });
      },
      (error) => this.setState({ error: error.message }),
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
    );
  }

  render() {
    const style = {
      width: '100%',
      height: '400px'
    }

    return (
      <div>
        <div>
          <iframe
            src={this.props.hogeCourse.myMapUrl}
            style={{ border:'none', width:'100%', height:'400px' }}>
          </iframe>
        </div>
        <div style={style}>
          <GoogleMap
            center={{ lat: this.state.latitude, lng: this.state.longitude }}
            defaultZoom={16}
          >
          </GoogleMap>
        </div>
      </div>
    );
  }
}

HogeCourseMap.propTypes = {
  hogeCourse: PropTypes.shape({
  }).isRequired,
  google: React.PropTypes.object,
  zoom: React.PropTypes.number,
};

export default HogeCourseMap;