Load libraries

[gabrielHosino]

Hello again,

Is it possible to load libraries from the API? I tried to pass the names of the libraries in the params like this:

const gmParams = { v: '3.exp', key: apiKey, libraries: 'visualization' }

And then pass that constant to the params props from gmaps component.

Am i doing it wrong or is this not possible to be done right now?

Thank you all!

[copperstick6]

I think it should be possible. Have you put <script src="https://maps.googleapis.com/maps/api/js?libraries=visualization"></script> inside your HTML file?

[MicheleBertoli]

Hello @gabrielHosino, I can confirm that passing libraries: 'visualization' to the params prop, generates the correct URL:

<script src="https://maps.googleapis.com/maps/api/js?callback=mapsCallback&libraries=visualization"></script>

It is also possible to manually load the script, as @copperstick6 suggested, but not necessary.

[gabrielHosino]

@MicheleBertoli @copperstick6 Thanks for the replies. So I rather use the params prop to do this, but it's not working for me. I tried to create a heatmap in the callback function but it didn't find the visualization library.

[copperstick6]

Do you have some sample code we could take a look at?

[copperstick6]

@gabrielHosino I have the exact same issue as well, I think. For some reason, I have to put it inside my index.html file. Here's some sample code that I cooked up:

const params = {v: '3.exp', key: googleAPIKey(), libraries: 'visualization'};
const coords = {
  lat: 33.7490,
  lng: -84.3880
};
class Map extends Component {
  constructor(props){
    super(props);
    this.state = {
      markers : [],
      id: 1,
      map: null,
    };
    this.onMapCreated = this.onMapCreated.bind(this);
    this.onCloseClick = this.onCloseClick.bind(this);
    this.onClick = this.onClick.bind(this);
    this.onDragEnd = this.onDragEnd.bind(this);
  }
  onMapCreated(map) {
    this.setState({map:map});
  }

  onDragEnd(e) {
    console.log('onDragEnd', e);
  }
  onCloseClick() {
    console.log('onCloseClick');
  }
  onClick(e) {
    var elements = [];
    elements.push(new window.google.maps.LatLng(e.latLng.lat(), e.latLng.lng()))
    this.setState({id: this.state.id + 1});
    var heatmap = new window.google.maps.visualization.HeatmapLayer({
      data: elements,
      dissipating: false,
      map: this.state.map,
    })
    heatmap.setMap(this.state.map)
    console.log(this.state.map)

  }
render() {
    return (
      <div>
      <Gmaps
        width={'1000px'}
        height={'600px'}
        lat={coords.lat}
        lng={coords.lng}
        onClick = {this.onClick}
        mapTypeID = {'terrain'}
        zoom={12}
        params={params}
        onMapCreated={this.onMapCreated}>
      </Gmaps>
      </div>
    );
  }
}

If I do not include the URL inside my index.html file, this code will throw the following error:

Uncaught TypeError: Cannot read property 'HeatmapLayer' of undefined
    at Map.onClick
    at Object._.A.trigger 
    at jy._.k.de (map.js:45)
    at jy._.k.Ji (map.js:43)
    at Object._.A.trigger 
    at hq.<anonymous> (common.js:132)
    at Object._.A.trigger
    at hq._.k.Vi (common.js:192)
    at HTMLDivElement.<anonymous

@MicheleBertoli can you take a look at this?

[gabrielHosino]

My code is just like yours. The only difference is that i'm trying to create the heatmap inside the function onMapCreated and i get the same error.

[copperstick6]

yeah, I'm creating a heatmap marker whenever the user clicks on the map, still no clue why the code doesn't work.
If I import it manually using script tags, it works. That should be a temporary solution while we take a look at the library issue.

[copperstick6]

@gabrielHosino you should re-open this issue.

[gabrielHosino]

@MicheleBertoli Could you take a look on this issue? I don't know if I can re-open this.

[copperstick6]

yeah you're going to have to wait for the owner of the repo to re-open this issue since he closed it

[MicheleBertoli]

@gabrielHosino @copperstick6 unfortunately I can't repro the issue.

The following code works as expected:

<Gmaps
  params={
    { libraries: 'visualization' }
  }
  onMapCreated={
    () => console.log(window.google.maps.visualization ? '👍' : '👎')
  }
/>

I assume you are trying to access the visualization property when the library is not fully loaded. I suggest you to activate the handler only when onMapCreated has been fired (e.g. using a flag). Please let me know if you need more information.

[copperstick6]

Ah, that makes sense. I put in a callback in my onMapCreated that waits for the library to load, and it worked.

[gabrielHosino]

@MicheleBertoli @copperstick6 Thanks for the help.

@copperstick6 Could you show me how you made the callback?

[copperstick6]

Sure. I just created a new state that was default to false, and then set it to true whenever the library loaded. The way you can do it is you can catch the error that occurs due to the library not loading and once the error disappears, set the state to true and load whatever methods you need.