zoom in on bounds of markers

[kellyrmilligan]

thanks for this component, saving me time for sure! one thing i'm trying to do at the moment is zoom in on the bounds of the markers I have loaded into the map.

var venues = this.props.venues;
    var latlngList = [];
    var bounds = new google.maps.LatLngBounds();
    var l = venues.length;
    var lL;
    var coordinate;

    while (l--) {
      coordinate = venues[l].coordinate;
      latlngList.push(new google.maps.LatLng (coordinate[1],coordinate[0]));
    }

    lL = latlngList.length;

    while (lL--) {
      bounds.extend(latlngList[lL]);
    }

    this.refs.map.fitBounds(bounds);

I have a ref on the component, and it's calling the method in componentDidMount, but it's not zooming in to fit the bounds.

is there something else I have to do to get the map to react to what i'm doing?

I have this same code working in a non-reactjs based mapping app.

[tomchentw]

Just to make sure, in componentDidMount, is the map already being initialized? If not, calling fitBounds won't have any effect. Maybe I should add a warning log for this situation.

[kellyrmilligan]

that seems to be the issue, shoudl I maybe bind to the idle event on the map? what's the best way to tell if it's initialized?

[kellyrmilligan]

binding on onIdle is working. thanks!

[tomchentw]

I don't event know there's an onIdel event. LOL
I'll suggest that you use this.context.hasMap() to check map existence.