带有React chat应用程序的Google地图

Question

我正在创建具有Google地图功能的聊天应用程序。 我创建了messenger.js文件，并想点击（fa-map-marker）这是一个位置符号来调用Google地图。

 <h2><button class="fa fa-map-marker"></button>&nbsp;Messenger</h2>

我创建了另一个包含此代码的map.js文件。

  import React, { Component } from 'react';
  import GoogleMapReact from 'google-map-react';

  const AnyReactComponent = ({ text }) => <div>{text}</div>;

  class MyClass extends Component {
    constructor(props){
      super(props);

    }

    render() {
     return (
       <GoogleMapReact
       defaultCenter={this.props.center}
       defaultZoom={this.props.zoom}
       style={{height: '300px'}}
       >
       <AnyReactComponent
        lat={59.955413}
        lng={30.337844}
        text={'Google Map'}
       />
       </GoogleMapReact>
     );
    }
  }
  MyClass.defaultProps = {
   center: {lat: 59.95, lng: 30.33},
   zoom: 11
  };

  export default MyClass;

我想通过单击位置符号来调用map.js文件。 有任何建议。