google-map-react: Wrong Calculation on Zoom Out

Hi!

I liked very much this plugins. Congratulations and thanks!

I really want to use this in my application, but I have a problem.

When I decrease the zoom, the positions of my Markers are wrong:

Initial position: screen shot 2016-06-10 at 11 46 49 am

Position on zoom out (my mark goes to ocean): screen shot 2016-06-10 at 11 54 02 am

My component code:

<GoogleMap
  bootstrapURLKeys={{ key: 'XXX' }}
  defaultCenter={myPosition}
  center={myPosition}
  defaultZoom={15}>
      <UserPin {...myPosition} />
 </GoogleMap>

I forgot some configuration or it’s a bug? Someone can help me?

Thanks!

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 7
Comments: 21 (3 by maintainers)

Most upvoted comments

for anyone who has the same issue, the problem is that the custom marker is anchored at top left of the marker, but we actually want for marker to anchor is usually at center bottom. The fix would be adding a negative marginTop and marginLeft to adjust the anchor.

+11

GingerBear on Aug 15, 2017

@Suresh-R-S You just need to use transform: translate(-50%, -50%) and that will do

itsmichaeldiego on May 17, 2018

@seyaobey You just need to add the following css property:

transform: translateX(-50%)

Default position for the marker is bottom-left, if you want to move it, you should change one of the axis, in your case you want to set it in bottom-center, so you just need to change the X asis.

If you want it to point top-left, then you change the Y axis, if you want it in the center you change both, and so on.

Does it makes sense?

Here is an example using both axis to set the marker to the center in google-map-react-examples

CC @jolker @wahlforss @DeekshaPandit

itsmichaeldiego on May 7, 2020

One thing which wasted lots of my time was to add margins of inner SVG, i had wrapping divs for some text placement on custom pointers, and adding margins on those wrapping divs caused weird issues of pointer placements. When i moved negative margins to inner most SVG and p tag of the text separately, issue was fixed

ziaulrehman40 on Jun 1, 2020

@itsmichaeldiego perfect fix 😃

IhsanMujdeci on Jul 2, 2019

The way to solve it, as mentioned by @GingerBear is to apply negative margin-left and negative margin-top.

In my case i added the margins as follows(it will be related to your icon size):

font-size: 34px !important;
margin-top: -34px;
margin-left: -17px;

Hope it helps.

socksrust on May 16, 2018

It’s better to use map as controllable component as in this example https://jsbin.com/lepadusowo/edit?js,console,output

And if you will use the same coords for center and for pin, you will got that pin will always be placed on the map center. And not at the coordinate you want

istarkov on Jun 10, 2016