Google Map Pin Drop Animation

Day by day we meet new challenges and we first think that this is not going to possible in any ways but then there is a time when we think of that challenge and ready to face it.

So as per same I have a new project in which there is a pin drop animation in google map. So I go through different sites like stackoverflow, github, reddit and medium too. But I didn’t get my answer.

So At last I told to project manager that google map is not providing any kind of this feature So we need to replace this animation with a popout animation provided by google map default.

So one day I was free and thinking about that animation if it is possible or not. So I took my laptop in our office’s game zone, with a CCD coffee and try to think to implement that feature.

Now I have the challenge So i figure out how to start it.

Really Interesting!!!!!

First I thought how to convert my pin points with my view points.

So now we are using google map functionality widely, We are using projection of google map which convert google map marker coordinates with view CGPoints.

I am taking Syndey, Australia coordinates as example.

So what happens next?

Now we have our view CGPoints, We can do whatever we can.
So first of all we can imagine where we have to drop our pin, So for example, If we have to drop pin from our screen top then we can do it.

We are taking a small drop of 200 pixels.

So now the core logic of this animation.

1. We have coordinates of our marker in our screen. So we can add a subview with same coordinates excluding y axis.
2. Create a view with 200 minus y axis and add into our UIView and take same imageview as of pin icon, add it into that subview as follow.

Now you think why there is 22 pixels minus from x axis, We will talk this later.

You have this kind of view right now

4. We can animate this view to our desired coordinates. Just animate to that coordinates and remove that view from superview and add google marker into map. So we can use uiview animation for this as follow

Same question here why there are 22 pixel minus from x and y axis.

So as per our logic we create UIView and add it as subview. Assume that size of pin is 44*44

So for example, We found out pin coordinates as (300, 200), that is center of our pin so if we create uiview of same coordinates that is not at perfect position, It is right side of our marker. So for that we are deducting that pixels from x and y axis. Our desired output as follow

Here is the full source code for this. Happy Coding!!!

https://gist.github.com/jeckymodi/c06c5e056460b3035f4f2bf2febff26e