React-google-maps: triggerEvent('resize') does...what?

Created on 16 Sep 2016  路  7Comments  路  Source: tomchentw/react-google-maps

http://react-google-maps.tomchentw.com/#/?_k=vkf06f

If you load this in Chrome nightly and open the console, you can see the logs dump on the window resize event, but the map is not being updated to reflect the changing screen size.

The example code just logs the component instance on resize. But how does one actually trigger the resize _on the map_, with access only to the _component_? Looking at the source code, it looks like triggerEvent just spreads the args, but my understanding of the gMaps API is that I need to run something like map.setCenter or setBounds or something on the event?

What's the way to do this on the given implementation? I wouldn't ask, but it just doesn't seem to be working in the demo example.

Thanks!

Most helpful comment

I have updated to v6, and used ref to expose the google map element. since there is no 'util/triggerEvent' any more, I just call the google.map.event.trigger to trigger 'resize' on the element, unfortunately it doesnt work correctly. I assume the google map element i got is modified by library because I saw there is no setCenter and setZoom.

Is there any implementation related to this issue, much appreciated!

update Nov 21, 2016:
For anyone who has the same problem. the solution for me is:

the google map element which I exposed by refs has a secrect map object on its context
code:

google.maps.event.trigger(this._map.context['__SECRET_MAP_DO_NOT_USE_OR_YOU_WILL_BE_FIRED'], 'resize')

__SECRET_MAP_DO_NOT_USE_OR_YOU_WILL_BE_FIRED is a real thing

All 7 comments

Could you check if this issue still exists on 6.0.0? It's released on npm beta tag now. We also have a new demo page. Feel free to try it:
https://tomchentw.github.io/react-google-maps/

I have updated to v6, and used ref to expose the google map element. since there is no 'util/triggerEvent' any more, I just call the google.map.event.trigger to trigger 'resize' on the element, unfortunately it doesnt work correctly. I assume the google map element i got is modified by library because I saw there is no setCenter and setZoom.

Is there any implementation related to this issue, much appreciated!

update Nov 21, 2016:
For anyone who has the same problem. the solution for me is:

the google map element which I exposed by refs has a secrect map object on its context
code:

google.maps.event.trigger(this._map.context['__SECRET_MAP_DO_NOT_USE_OR_YOU_WILL_BE_FIRED'], 'resize')

__SECRET_MAP_DO_NOT_USE_OR_YOU_WILL_BE_FIRED is a real thing

I'm also looking for setZoom which used to be available and no longer is. What is the new implementation of this in v6.x?

@reintroducing You can change the zoom with the zoom prop on your GoogleMap.

@uniquoooo I could have sworn I tried that and it was causing performance issues but I may be thinking of a different library I tried (these past few days have been a nightmare of Google Maps for me :) Thanks, when I can I'll circle back to upgrading and see if that works.

Please refer to Getting Help section in the README (or #469).

@r2dev could you please share a code snippet about how/where to make the ref for example in the main sample?
https://github.com/tomchentw/react-google-maps#withgooglemap

Was this page helpful?
0 / 5 - 0 ratings

Related issues

0x1bitcrack3r picture 0x1bitcrack3r  路  3Comments

farhan687 picture farhan687  路  3Comments

Mahmood004 picture Mahmood004  路  3Comments

julienvincent picture julienvincent  路  3Comments

tahir-masood1 picture tahir-masood1  路  4Comments