From a1da978ea19ed93286c241ac6991c45a9a30a18c Mon Sep 17 00:00:00 2001 From: Matt Brookes Date: Fri, 9 Oct 2015 20:53:15 +0100 Subject: [PATCH] Add tip on positioning markers --- README.md | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 02bec95..9df3b85 100644 --- a/README.md +++ b/README.md @@ -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: