archive-gh-me/google-map-react
1
0
Fork 0
mirror of https://github.com/google-map-react/google-map-react.git synced 2025-12-08 18:26:32 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #47 from mbrookes/master

Browse Source 
Add tip on positioning markers
This commit is contained in:
Matt Brookes 2015-10-09 20:54:04 +01:00
commit dbd12ded71
1 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
README.md
View File

@ -222,14 +222,28 @@ const {center, zoom} = fitBounds({nw, se}, size);
[example](http://istarkov.github.io/google-map-react/map/events/) ([source](https://github.com/istarkov/google-map-react-examples/blob/master/web/flux/components/examples/x_events/events_map_page.jsx))
* Example project:
[main](http://istarkov.github.io/google-map-react/map/main/) ([source](https://github.com/istarkov/google-map-react-examples/blob/master/web/flux/components/examples/x_main/main_map_block.jsx))
[balderdash](http://istarkov.github.io/google-map-react/map/balderdash/) (same source as main)
[main](http://istarkov.github.io/google-map-react/map/main/) ([source](https://github.com/istarkov/google-map-react-examples/blob/master/web/flux/components/examples/x_main/main_map_block.jsx)); [balderdash](http://istarkov.github.io/google-map-react/map/balderdash/) (same source as main)
* All api examples:
[google-map-react-examples](https://github.com/istarkov/google-map-react-examples)
## FAQs
## Tips
### Positioning a marker
Initially any map object has its top left corner at lat lng coordinates. It's up to you to set the object origin to 0,0 coordinates.
Example (centering the marker) :
```js
const MARKER_SIZE = 40;
const greatPlaceStyle = {
position: 'absolute',
width: MARKER_SIZE,
height: MARKER_SIZE,
left: -MARKER_SIZE / 2,
top: -MARKER_SIZE / 2,
[...]
}
,,,
### Rendering in a modal
If at the moment of GoogleMap control created, a modal has no size (width,height=0) or/and not displayed, the simple solution is to add something like this in render: