google-map-react/DOC.md

Documentation

Here I'll try to explain why some methods in google map react are needed and how to use them.

For all examples I'll use recompose and you must understand what css-modules is.

Looks like to rewrite current api I need to create Documentation about current version, so it will be easier to detect wrong ideas and solutions

Simple example.

Simple example

At Map.js you will see the smallest possible boilerplate for GoogleMapReact component,

And a MyMarker.js is a simple React component.

Open Log tab at the top of webpackbin and see the mapProps log. (see the withProps at Map.js)

First value is the { center and zoom } which is set by you (see withState at Map.js), and second value is the value provided by GoogleMapReact component at initialization in onChange callback.

{
  center: { lat, lng }, // current map center
  zoom: 4, // current map zoom
  bounds: { nw, se, sw... }, // map corners in lat lng
  size: { width, height... } // map size in px
}

Calling onChange at initialization is needed because map bounds can't be calculated without knowledge of map size, and bounds are really usefull in a lot of situations. (see Note below)

Please move and zoom the map to see log changes.

Be sure that onChange callback is not called at realtime, and only at idle google map api callback.

It's because google api itself provides changes with some delay and to avoid synchronization issues one of the ways was to use idle callback.

NOTE: Now I think it was wrong decision to call onChange at initialization. In the future releases I'll remove such behavior and will provide helper to calculate size and bounds outside map control. I think about helper similar to AutoSizer

PS: I highly recommend you to use GoogleMapReact as a controllable component, and always provide center, zoom and onChange props. (see withState)

NOTE: In the future releases I'll remove usage of all defaultProps like defaultCenter

Whats wrong with "Simple example" above

The wrong part is that React components are placed on the map positioning from top, left corner.

In most cases it's not the expected behaviour, so we need to change the MyMarker position by changing it's position and left, top css properties, or use flex as like as in this example.

Good position

Now MyMarker centered well, see the myMarker.css css changes and MyMarker.js layout change.

To be continued