GoogleMap public api - no methods work #133

dylantf · 2015-10-14T22:07:07Z

I'm having an issue accessing any of the methods that should be exposed on the GoogleMap component.

In any of these methods, this.state is undefined:

Lines 32 to 65 in 0e41701

    
           getBounds () { return this.state.map.getBounds(); } 
        
           getCenter () { return this.state.map.getCenter(); } 
        
           getDiv () { return this.state.map.getDiv(); } 
        
           getHeading () { return this.state.map.getHeading(); } 
        
           getMapTypeId () { return this.state.map.getMapTypeId(); } 
        
           getProjection () { return this.state.map.getProjection(); } 
        
           getStreetView () { return this.state.map.getStreetView(); } 
        
           getTilt () { return this.state.map.getTilt(); } 
        
           getZoom () { return this.state.map.getZoom(); } 
        
           // END - Public APIs 
        
           // 
        
           // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Map 
        
           // 
        
           // Public APIs - Use this carefully 
        
           // See discussion in https://github.com/tomchentw/react-google-maps/issues/62 
        
           //  
        
           // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Map 
        
           // 
        
           // [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; }).filter(function(it){ return !it.match(/^get/) && !it.match(/^set/) && !it.match(/Map$/); }) 
        
           fitBounds (bounds) { return this.state.map.fitBounds(bounds); } 
        
           panBy (x, y) { return this.state.map.panBy(x, y); } 
        
           panTo (latLng) { return this.state.map.panTo(latLng); } 
        
           panToBounds (latLngBounds) { return this.state.map.panToBounds(latLngBounds); }

The text was updated successfully, but these errors were encountered:

tomchentw · 2015-10-15T02:27:28Z

I think it works on the <GoogleMap> component in the example. Could you double confirm?

Code:

react-google-maps/examples/gh-pages/scripts/components/GeojsonToComponents.js

Lines 74 to 101 in 67895ab

    
           _handle_map_zoom_changed () { 
        
             this.setState(update(this.state, { 
        
               geoStateBy: { 
        
                 0: { 
        
                   $merge: { 
        
                     zoom: this.refs.map.getZoom(), 
        
                   }, 
        
                 }, 
        
                 1: { 
        
                   $merge: { 
        
                     opacity: 0.2+(this.refs.map.getZoom()/14), 
        
                   }, 
        
                 }, 
        
               }, 
        
             })); 
        
           } 
        
           _handle_marker_click () { 
        
             this.setState(update(this.state, { 
        
               geoStateBy: { 
        
                 0: { 
        
                   $merge: { 
        
                     zoom: 1+this.refs.map.getZoom(), 
        
                   }, 
        
                 }, 
        
               }, 
        
             })); 
        
           }

Demo: https://tomchentw.github.io/react-google-maps/#geojson

dylantf · 2015-10-15T03:01:40Z

this.refs.map.getZoom() doesn't work either for me. Any of the methods off of this.refs.map give me an error in the GoogleMap component, this.state is undefined.

Here's the code I'm using:
https://gist.github.com/dyyylan/849d073d7ab16e9a3860

I tried cloning the repo to set up the gh-pages and see if it worked locally, but none of the pages will load.

tomchentw · 2015-10-15T03:30:14Z

So you can't load examples/gh-pages locally? Weird. What's your node, npm version?

The gist looks okay though. However, in componentDidUpdate, could you try to call this.refs.map.fitBounds() directly? I'm not sure if that's the case.

dylantf · 2015-10-15T03:34:25Z

Same error. The line highlighted is this here:

{
    key: "fitBounds",
    value: function fitBounds(bounds) {
      return this.state.map.fitBounds(bounds); // cannot read property `fitBounds` of undefined
    }
  }

I'm running node 4.1.2 and npm 2.14.4

tomchentw · 2015-10-15T03:45:56Z

Did you load google.mas script before React?

/*
 * This is the modify version of:
 * https://developers.google.com/maps/documentation/javascript/examples/event-arguments
 *
 * Add <script src="https://maps.googleapis.com/maps/api/js"></script> to your HTML to provide google.maps reference
 */

dylantf · 2015-10-15T04:03:56Z

Yes. I should mention the rest of the map stuff is working great, it's just these couple exposed methods that don't work.

tomchentw · 2015-10-15T05:20:09Z

It's really weird. I updated the GeojsonToComponents module to include componentDidUpdate and it works great.

dylantf · 2015-10-15T16:05:06Z

Ok I did some more testing and I was able to reproduce what is causing the problem.

In your examples, the map is loaded as soon as the component is mounted.

If something prevents the component from mounting immediately (i.e. I load data and show a spinner gif before the map is shown on the page), something in the GoogleMap state is not bound

I created a repo so you can see how this happens:
https://github.com/dyyylan/map-error

Do you have any suggestions to work around this?

tomchentw · 2015-10-16T01:28:32Z

I tried to update the Map component to:

    componentDidUpdate() {
        if (this.refs.map) {
            console.log('Zoom level:', this.refs.map.getZoom());
        }
    }

But it doesn't work. Still the error of Uncaught TypeError: Cannot read property 'getZoom' of undefined due to this.state.map is undefined.

tomchentw · 2015-10-16T01:34:20Z

@Dyyylan I had a workaround here: https://github.com/dyyylan/map-error/compare/master...tomchentw:master

PanJ · 2015-11-04T07:57:10Z

@tomchentw I'm having exact same problem but I cannot view your workaround you posted.

sijovijayan · 2015-11-04T09:55:09Z

@Dyyylan @tomchentw , Can you change the value of 'ref' attribute in the component render block ?
Use something like the following

     ref="glmap"

Please let me know the result.

dylantf · 2015-11-04T16:16:59Z

Sorry, I cleaned up some repositories I wasn't using and deleted my fork of this project. @PanJ, the workaround was to just create a wrapper component for the map.

Whichever component the map is in, it must render when the component mounts, or you won't get the api exposed. That was the cause of my issue

beeant · 2015-11-17T15:19:47Z

I'm having this problem too after upgrading to newer version.

Uncaught TypeError: Cannot read property 'fitBounds' of undefined

tomchentw · 2015-11-19T03:33:48Z

A reproducible jsfiddle would be appreciated! @beeant

beeant · 2015-11-19T08:18:05Z

@tomchentw sorry, it works after I moved options to options props

* Ref #92 BREAKING CHANGE: ScriptjsLoader will delegate to GoogleMapLoader when the script is loaded Before: ```js <ScriptjsLoader hostname={"maps.googleapis.com"} pathname={"/maps/api/js"} query={{v: `3.${ AsyncGettingStarted.version }`, libraries: "geometry,drawing,places"}} loadingElement={ <div {...this.props} style={{ height: "100%" }}> <FaSpinner /> </div> } googleMapElement={ <GoogleMap containerProps={{ ...this.props, style: { height: "100%", }, }} ref={googleMap => { // Wait until GoogleMap is fully loaded. Related to #133 setTimeout(() => { googleMap && console.log(`Zoom: ${ googleMap.getZoom() }`); }, 50); }} defaultZoom={3} defaultCenter={{lat: -25.363882, lng: 131.044922}} onClick={::this.handleMapClick} > <Marker {...this.state.marker} onRightclick={this.handleMarkerRightclick} /> </GoogleMap> } /> ``` After: ```js <ScriptjsLoader hostname={"maps.googleapis.com"} pathname={"/maps/api/js"} query={{v: `3.${ AsyncGettingStarted.version }`, libraries: "geometry,drawing,places"}} loadingElement={ <div {...this.props} style={{ height: "100%" }}> <FaSpinner /> </div> } containerElement={ <div {...this.props} style={{ height: "100%" }} /> } googleMapElement={ <GoogleMap ref={googleMap => { googleMap && console.log(`Zoom: ${ googleMap.getZoom() }`); }} defaultZoom={3} defaultCenter={{lat: -25.363882, lng: 131.044922}} onClick={::this.handleMapClick} > <Marker {...this.state.marker} onRightclick={this.handleMarkerRightclick} /> </GoogleMap> } /> ```

tomchentw · 2015-11-22T04:13:23Z

Separating google.maps instance creation with React component mounting completely solves this problem. See #157

tomchentw · 2015-11-22T04:21:56Z

Released v4.6.0

tomchentw added bug labels Nov 19, 2015

tomchentw closed this as completed in 532816a Nov 22, 2015

tomchentw removed bug labels Dec 3, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GoogleMap public api - no methods work #133

GoogleMap public api - no methods work #133

dylantf commented Oct 14, 2015

tomchentw commented Oct 15, 2015

dylantf commented Oct 15, 2015

tomchentw commented Oct 15, 2015

dylantf commented Oct 15, 2015

tomchentw commented Oct 15, 2015

dylantf commented Oct 15, 2015

tomchentw commented Oct 15, 2015

dylantf commented Oct 15, 2015

tomchentw commented Oct 16, 2015

tomchentw commented Oct 16, 2015

PanJ commented Nov 4, 2015

sijovijayan commented Nov 4, 2015

dylantf commented Nov 4, 2015

beeant commented Nov 17, 2015

tomchentw commented Nov 19, 2015

beeant commented Nov 19, 2015

tomchentw commented Nov 22, 2015

tomchentw commented Nov 22, 2015

GoogleMap public api - no methods work #133

GoogleMap public api - no methods work #133

Comments

dylantf commented Oct 14, 2015

tomchentw commented Oct 15, 2015

dylantf commented Oct 15, 2015

tomchentw commented Oct 15, 2015

dylantf commented Oct 15, 2015

tomchentw commented Oct 15, 2015

dylantf commented Oct 15, 2015

tomchentw commented Oct 15, 2015

dylantf commented Oct 15, 2015

tomchentw commented Oct 16, 2015

tomchentw commented Oct 16, 2015

PanJ commented Nov 4, 2015

sijovijayan commented Nov 4, 2015

dylantf commented Nov 4, 2015

beeant commented Nov 17, 2015

tomchentw commented Nov 19, 2015

beeant commented Nov 19, 2015

tomchentw commented Nov 22, 2015

tomchentw commented Nov 22, 2015