Google-maps-react: onBoundsChanged or onZoom?

Created on 22 Dec 2016  路  8Comments  路  Source: fullstackreact/google-maps-react

I'm filtering some data based the visibility of markets in the view area (using getBounds on the markers lat/longs). I can easily do this for dragging using mapDragEnd, but is there an action related to the bounds_changed event? Or some other way to listen to viewport changes/zoom level changes?

I see actions being dynamically defined here
https://github.com/fullstackreact/google-maps-react/blob/master/src/index.js#L174
but onBoundsChanged does not work.

EDIT:

Hmm, actually, I see my codebase differs from 1.0.18. My package.json says I'm on 1.0.19, and, in this version, all these events do not exist.

I added bounds_changed here:

# index.js

var evtNames = ['ready', 'click', 'dragend', 'recenter', 'bounds_changed'];

 evtNames.forEach(function (e) {
    return Map.propTypes[(0, _String.camelize)(e)] = _react.PropTypes.func;
  });

and, though the prop is called onBounds_changed, it's working for me now. Not sure what's up with the version numbers, but I'll try... downgrading(?) to the latest?

Most helpful comment

All of the events are now available through the npm package but are not named what they should be. To use any of the events simply capitalize the first letter and prepend the word on. For example 'tilesloaded' becomes 'onTilesloaded', 'bounds_changed' becomes 'onBounds_changed', and so on

All 8 comments

I have same issue as @derekcannon. i need to listen to zoom_changed event and it is not exist in npm 1.0.19 package
but exist in git repo https://github.com/fullstackreact/google-maps-react/blob/master/src/index.js#L22

const evtNames = [
  'ready',
  'click',
  'dragend',
  'recenter',
  'bounds_changed',
  'center_changed',
  'dblclick',
  'dragstart',
  'heading_change',
  'idle',
  'maptypeid_changed',
  'mousemove',
  'mouseout',
  'mouseover',
  'projection_changed',
  'resize',
  'rightclick',
  'tilesloaded',
  'tilt_changed',
  'zoom_changed'
];

I have the same problem, the version in the node_modules is 1.0.19, but the repo code is 1.0.18
But the code form the node_modules is different from the one in the repos
Both version 1.0.18 and 1.0.19 has
var evtNames = ['ready', 'click', 'dragend', 'recenter'];

How is it possible that this still isn't fixed? Even though code is correct in this repo, npm package still has old version of events even after three months?!

馃槩

Use onZoom_Changed property on the map, actually, it should be onZoomChanged property but because of mistake in their camelcase function.

This is the problem
export const camelize = function(str) {
return str.split(' ').map(function(word) {
return word.charAt(0).toUpperCase() + word.slice(1);
}).join('');
}

changed as for the developer...
export const camelize = function(str) {
return str.split('_').map(function(word) {
return word.charAt(0).toUpperCase() + word.slice(1);
}).join('');
}

For time being we can use onZoom_changed property.

All of the events are now available through the npm package but are not named what they should be. To use any of the events simply capitalize the first letter and prepend the word on. For example 'tilesloaded' becomes 'onTilesloaded', 'bounds_changed' becomes 'onBounds_changed', and so on

For time being we can use onZoom_changed property.
You sir should receive a beer. thanks!

@ganesh-4212 Start accepting Brave BAT tips please

For time being we can use onZoom_changed property.

Was this page helpful?
0 / 5 - 0 ratings