如何使用React JS将FusionTablesLayer放入Google Maps API中？

Question

I have a doubt, I'm using ReactJS to separate modules, and I have a class called InitialMap, that I export to app.js:

import React from 'react';
import loadGoogleMapsAPI from 'load-google-maps-API';

const MAP_STYLES = {
    height: '450px',
    width: '100%'

}

const OPTIONS = {
    center: {
        lat: 41.850033,
        lng: -87.6500523
    },
    zoom: 13,

}

const API_CONFIG = {
    key:'My_Key xxxxxxx',
    language: 'en'
}

export default class InitialMap extends React.Component{
    componentWillUnmount() {

        const allScripts = document.getElementsByTagName( 'script' );

        [].filter.call(
            allScripts,
            ( scpt ) => scpt.src.indexOf( 'My_Key xxxxxxx' ) >= 0
        )[ 0 ].remove();

        window.google = {};


    }

    componentDidMount() {

        loadGoogleMapsAPI( API_CONFIG ).then( googleMaps => {
            new googleMaps.Map( this.refs.map, OPTIONS  );
        }).catch( err => {
            console.warning( 'Something went wrong loading the map', err );
        });

    }

    render() {
        return (
            <div id="page-wrapper">
                <div id= "page-header">
                    <div ref="map" style={MAP_STYLES}>

                    </div>
                </div>
            </div>
        )
    }
}

The map is being shown on the screen, but I need put the markers!

The problem is that I don't know how to put the Fusion Tables layer to use the marker, to show red points for example by Google!

Using just the script file + the id in index.html <div id="map"><div> it is working but I need put it to use in specific React's module, and call it in app.js file. In the documentation of Google is an example is this way:

    function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 41.850033, lng: -87.6500523},
    zoom: 11
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: '\'Geocodable address\'',
      from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
    }
  });
  layer.setMap(map);
}

(this var layer that I need to put !!!) in my code

If anyone can help I will appreciate it! PS: I'm new in React JS!

Answer 1

If you loaded the API on the page it should work exactly the same way, just save your map instance in your class when you create it then you will be able to use it in the other calls.

    loadGoogleMapsAPI( API_CONFIG ).then( googleMaps => {
        this.map = new googleMaps.Map( this.refs.map, OPTIONS  );

        var layer = new google.maps.FusionTablesLayer({
          query: {
            select: '\'Geocodable address\'',
            from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
          }
        });
        layer.setMap(this.map);
    }).catch( err => {
        console.warning( 'Something went wrong loading the map', err );
    });